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— Guest editor- — 

Welcome 
to200! 


M To be the most accessible and | V f 
inspiring voice for the industry, ' / 1 

I offering cutting-edge features 
L and techniques vital to 

building future-proof Matt 

online comon; #» Mullenweg 


welcome | 


The web is a first-class development platform 


i: eb Designer magazine started in 
1997 when the hot topics were 
searching with AltaVista, Dynamic 
HTML, and HotWired WebMonkev 
was hand-coded with bbEdit. I was in 
middle school, 200 issues later, an 
impressive teat tor any publication, 
and the names and the technologies 
have changed, but the passion that designers and 
developers have tor creating the web as a craft is the 
same (and WebMonkev now uses Word Press), 

Today the web has become a first-class development 
platform. Forget about nudging single-pixel GIFs and 
abusing tables - that's in the past - today you can build 
an app with open-source tools and there are almost a 
billion people a dick away. There's never been anything 
like that in the history of our species, but what are you 
going to do with it? 

With great power comes great responsibility, 
especially fortesting. Vou'il notice a 'good chunk of the 
carefully-assembled 200 must-have tools starting on 
page £4 are either dedicated to testing your creation. 


like Firebug and Browsershots, or libraries and services 
that normalise cross-platform differences like Twitter 
Bootstrap, Typekit, jQuery, and Modernizr. I'm honoured 
to be included in the list with WordPress, as well as 
being the guest editor for this issue. 

Although there's much more to be excited about this 
issue, I have to mention the five questions with Enc 
Meyer starting on page 42. This is a special delight for 
me because Eric fond his css-discuss list) were my first 
introductions to modern web design. I had read 
Zeldman's Taking Your Talent to the Web and started to 
dabble, but still struggled with CSS layouts. I posted a 
question to css-discuss one hot August day from 
Houston, and within a few hours Mr Meyer himself had 
replied - helping me bottorn-align an image in a block 
element, thereby setting off a chain of events that led to 
me being passionate about web standards, meeting Eric 
atSXSW about a year later, and starting Word Press. I 
don’t think I've said it before, so: thank you. Eric. It's a 
story to keep in mind next time you find yourself 
helping someone with a tech-related issue... 

Matt Mullenweg 



Highlight 



iiifi We 
mustn’t put 
our eggs in one 
basket with 
one software 
solution M 

Web Designer takes 
the short hop over the 
Er^hsh Channel to 
Paris to talk to French 
web architects Soleil 
tor They reveal a love 
of Flash and coffee., 
and how they keep 
their oeaLfve integrity 
by not doing sales 
strategies. Page 36 


f f Today you can build an app with open-source tools m™ over to the contents to 

, ., discoverwhat’s going to get 

and there are almost a billion people just a click away w w you excited mis issue 

Follow us on Twitter for all the news & conversation 3 @WebDesignerMag 
Visit our blog for opinion, freebies & more© www.webdesignermag.co.uk 
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| contributors 


This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


G4 An exclusive 
insight to the past, 
present and future 
of WordPress 



The WordPress ra-faunder not only takes the helm as guest editor far our 
special 200th issue but he also gives us an exclusive insight to the past 
present and future of WordPress. To top it all off he recommends a host of 
WordPress tools and themes plus his favourite third-party apps, Page 20 



Sam Hampton-Smith Louis Lazaris Louis Simoneau 



Sam loves getting the most 
out of HTML and CSS. Thts 
month he creates a 
real time fmend-finder app. 
m pert one of lib tutor ial he 
uses H T ML5"s gedocattcn 
API tcMjah share and 
update your position utsing 
QpenStreetMaQ Page 6-B 



Louis writes regularly for a 
number of top design blogs, 
including his own site 
Impressive Webs. In this 
issue's lead feature he 
I unveils a collection erf some 
I of the best tools on the web- 


that every designer needs in 
their arsenal. Page 44 



Louis slings Ruby on Rails 
for Flippy, and hosts the 
SitePc«nt podcast, This issue 
he has a dose-up look at Git 
and GltHub. He reveals how 
version control works and 
why designers need to be 
fully aware of these two 

very popular tools Page a? 


Matt Giffo rd Marks huf f lebottom Ben Fraln 


J — I Matt Gifford is a lead RlA 
B. consular*developer and 
H industry author, who 
B specialises in ColdFusion. 

C Flash and AIR development, 
mis month he 

■ demonstrates how to build 
a URL shortener with Ruby 
and Smatra. Page 88 



Mark ShLtf lebdttom is the 
programme leader cf BA 
(Hons) Digital Media Design 
at Bournemouth University; 
in this issue he tackles the 
an of creating an interactive 
3D navigation system using 
the JavaScript rendering API 
WebGL. Page 54 



Ben Frain is a freelance 
front-end developer and 
tech writer. He is also the 
author of 'Responsive wab- 
-jcsign with HTML5 £ CSS3'. 
This issue he tells us how to 
serve hi-res images to high 
defin<ion displays such as 
the new 1 Pad. FageSfl 


Tliord Daniel Hederigren Pete Simmons 



Known as TDH Tor short. 
Thcrd is an author and 
freelance fOurnaHsLas well 
as a huge succcuter of 
coen source software. He 
ha* writ ten several books 
on WordPress and runs the 
Odd Alice wefc agency in 
Stockholm. Page 65 



Pete is a digital marketing 
manager for Llcnhead 
Studios. He specialises in 
fr-oht end development, PUP 
and social APIs. This mcnih 
Pete tackles the Facebook 
Graph APi and shows how 
to integrate images and 
data Into a website. Page 92 
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Inside issue 200 


contents 

Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 

O webdesianer@imaaine-publishina.co.uk Q@WebDesianerMaa C> www.webdesianermaa.co.uk 


Insider.. - 

20 Interview: Matt Mullenweg 

The WordPress co-founder and issue 200 
guest editor shares his vision of the future 

26 Lightbox 

Three sites that make the web a better place 
including work from Hello Monday 

32 Design diary: Firstborn 

This month's design diary sees us riding the 
development cycle of 'experience Sony' 

36 Pro File: Soleil Noir 

This month we spend time with French 
creative giants Soleil Noir 

42 Interview: Eric Meyer 

We snatch five questions with the king of CSS! 

44 Coven 200 tools & trends 

What are the most important tools in web 
design today? Our experts reveal theirs 

96 Portfolio 

Three more rising stars in the web world 

104 Hosting listings 

Check out the latest domain-based deals 

114 Style relic; Vimeo 

How has Vimeo changed since 2004? 
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Discussing the hottest topics 
from the web-design world 

8 15 years and counting! 

Take a journey through the evolution and 
revolution of web design 

14 Crowdsource 

We respond to your latest letters and tweets 

16 Comment: Beniamin Boiko 

Does abstraction kill curiosity? Big Spaceship 
technologist, Bojko, seems to think so 

17 Comment: Devin Silberfein 

2Advanced CEO Silberfein on getting the most 
out of working with nightmare clients 

18 Comment: Patrick Van Kann 

Once director of engineering at the Walt Disney 
Company, Van Kann explores life after Flash 



Cover focus 



Matt Mullenweg speaks 

Exclusive interview with the WordPress co-founder 



l 'he go to expert tor Cbb on what the l mure holds 


Pro File; Soleil Noir 

Behind the scenes with the French creative giant 
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112 Discover what your special issue discs have to offer 
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CSS transitions 
Mark Shuffle bottom 
u ses Julienrenvoye.com to 
demonstrate how clean, 
Flash-like transitions can be 
achieved in CSS 


76 Mainstream 
banner styles 
Adam Smith looks at one of the 
most important aspects of any 
web project, the banner, using 
some classic examples 



Web gurus take you step-by-step 
through professional techniques 
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Get to grips with GibHub. the ultimate collaboration 
tool for all kinds of developers 
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bespoke URLs 
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Discussiiig the hottest topics in the web-design world 

If you have a creative project new web product or great designer story contact the editorial desk 

O webdesiqner@imaqine-publishinq.co.uk 0@WebDesiqnerMaq 


15 years and 
counting 

Web Designer first hit the shelves 
in 1997 when the web was a very 
different place. Here we take a 
journey through the evolution 
and revolution of web design 


i .JIBU » jvt— 1 

ISSUE 153 


ONSALE 2009 



wL, 


— 1 




ON SALE 2006 


2 00issues. 15 years and millions of lovingly crafted words. Tne lifespan of a 
magazine seldom reaches such a substantial figure, but Web Designer has 
undoubtedly achieved a significant milestone. And along the way there have 
been some seism £ changes in web design across the board. 

The world's first website is credited to Tim Berners-Lee, boasting the URL http:// 
irfo.cernxh. So back in December 1990, the internet had a population of one. By the 
end of 1991 the figure had risen to ten; at the dose of 1992 it had reached 50, and a 
year later it had hit 623. Figures started to take a much bigger jump over the next 
couple of years. Indeed, by the end of 1994. websites 
had reached five figures, with just over 10.000. By 
tiie beginning of 1996 another milestone was 
reached as the 100,000 mark was passed. The 
growth in the intervening years has been massive - 
indeed, in less than ten years the web went from 
100,000 to around 100 million, and in the last five 
years from 100 million to over half a billion. 

Along the way technologies, techniques and 
trends have made huge strides in bringing the web 
to where it is today HTM15. CSS3 and jQuery are the 
current ruling triumvirate of web design, but back in 
1997 when Web Designer took its first steps into the 
market, things were a little different... 

HTML has always been the major building block, 
but it was a different beast when HTML3 launched In 
1995. HTML3 soon became HTML4 in 1997 and 
introduced a host of tags and recommendations that 
many have grown up with. The logical progression was HTMLS.and almost ten years 
later a working draft was introduced. Semantic tags and a whole new set of APIs 
have made HTML more powerful than ever - and it's not even finished yet 




HTML's now constant companion - CSS - hasn't always been by its side. Page 
styling was once dominated by tables and nested tables, inline styling. Flash 
animation and a very small collection of system fonts. Even frames and framesets 
were popular, but looking back it's hard to think why. Building pages was a painful 

enough experience, and updating often proved even 
more irritating. If animation was needed. DHTTMl and 
Flash were the folks to call on. The lack of font 
support meant that graphics were still the key 
component for creating headline-grabbing text. 

Thankfully. CSS revolutionised web design and 
unleased the power of stylesheets. CSS had a 
plethora of plus-points, but as always browser 
support made sure that it would take a while to gam 
traction, The introduction of CSS3 has seen designers 
say goodbye to the old and hello to a new and much 
more powerful version of the styling language, one 
that is only now starting to fulfil its potential. 

The new specifications, along with jQuery. have 
slowly pushed Flash to the wayside, Mobile is now as 
important - if not more important - than the desktops 
indeed, mobile operating systems and tablet screens 
are now all part of the mix. making the current field of 
web design and development - as well as the future - an incredibly exciting place to 
be. And. of course. Web Designer will be there to guide newcomers, enthusiasts and 
the experienced alike along the way. Here's to the next 200 issues! 
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Find news and feature items at@www.webdesignermag.co.uk 



Battle of the browsers 

Back in 2008. in Europe it was a straight fight between Internet Explorer and Firefox. IE 
was still top dog with Firefox the hot. up-and-coming contender. Opera and Safari were 
on an even keel. 

Chrome was just 
a baby and 
SeaMonkey 
(nemennber that?) 
was making up 
the numbers. 

How times 
changes 

Source: 

g 55 lsteounijer.com 


The rise of the website 


There are over half a billion registered 
names for websites, so potentially over 
half a billion websites. However, not 
every name is active. Active sites make 
up typ leally 25 or so per cent of tih e 
registered total. December 2011 saw 
555 million websites, but only around 
170 million were active, for example. 
Source: v\ ww.pingdor n.ccr n 



SSSmMlta 

234million; 


IS7 million 

Dec 2008 Dec 2009 Dec 2010 Dec 2011 
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Dotcom still number one 


There are nearly 100 million com 
domain names registered in the world 
- a rise of almost 20 million in just three 
years. Its hard to believe that so many 
exist, but it does explain why it s so 
hard to get one! 

Source: wwwamdomjram 


S5£mLULaj* 

81.8 rallticKTj^ *-*■'"’** 


Dec 2008 Dec 2009 Dec 2010 Dec 2011 
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COMMENT 

Russell Barnes 

Editor 

< yl I made the decision to work In computing and 
technology from a relatively young age, while the 
Internet was in its infancy. My thinking was simple - our 

will the career opportunities. It's proved to be the only 
sensible decision I’ve ever made. The industry as a whole is 

young, dynamic and bursting with creative vision and in no 

other area Is this more true than In Web design. What the 

next 200 issues holds in terms of new web technologies is 

anyone's guess, but that's what brought me here in @@ 

the first place -1 can’t wait to find out. 



COMMENT 

Steven Jenkins 

Features Editor 

£ £ 2 00 Issues Is an impr essive feat, and while I haven't 
worked on every issue. Fm proud to sav I have been 
associated with the magazine for nearly half of them. 
Imagine Publishing bought the rights to the Web Designer 
brand in 2005, and the mag has gone from strength to 
strength. Looking back it's staggering how far the web and 

web design have come in those few years. Flicking through a 

copy of 116 brings a wry smile Lo my face: Lhe technologies 
have advanced beyond recog n ition, and design in general is 
far more sophisticated. It does make me wonder where we 
willbe in another five or ten years: HTML6, CSS7, 
Dreamweaver 25. Firefox 1QQ? Whatever happens. I @@ 
am really looking for ward to the future. 


|j|n| Web Designer posed the question: What year did you build your first website and does it still exist?' 
Here's a few of the replies from our dedicated band of followers... 

@duskwebdesign 
@WebDesignerMag 1998 , and no it 

@changinghorizon 
@WebDesignerMag Can't 

@create_oblivion 

@WebDesignerMag 2001, my first 

doesn’t. Was for a blind users org 1 

remember the year, but were 

portfolio site built with nested tables 

built for my final-year uni project. 

still proud of this one: 

and a hideous Flash splash page! 

They've disbanded so site long gone 

http://woo de nf r u its. co m 

Thankfully it no longer exists 

©seanlangweb 

@WebDesignerMag First website 

@WeAreWebDesign 
@WebDesignerMag 2007 

@FotoLuna 

@WebDesignerMag My first 

that went online was 2007 and sadly 

and, painfully, yes ; it looks 

website 1993. Doesn't exist any 

it doesn't still exist because my 

embarrassingly awful 

more - don’t even have it backed 

hosting went down i 

now though! 

up unfortunately 
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| raws Discussing the hottest topics in the web design world 


Stay at home designers 

Is it time to make the switch to remote and home working? The facts show that 
businesses and individuals could both reap the rewards on offer 


D esign, by its very nature, is a 
profession that is typically 
performed In front of a screen 
with the designer sat at a desk. This 
scenario is the norm for agencies and 
offices across the globe. 

The same scenario is one that can be 
applied to homes around the world. It is 
almost inevitable that most designers will 
have a very similar setup at home. An 
internet connection is almost guaranteed, a 
copy of the latest CS suite (or preferred 
tools) and a comfy chai r wi II all make the 
grade. With all the necessary assets in place 
the next question is. 'why don't more of us 
work from home?' Is it the iack of intelligent 
company? The isolation of a home office? 


Or is it that we simply cannot be trusted? On 
a more positive note. travel times will be 
immediately negated, overheads could be 
reduced, and more flexibility introduced to 
working practices, 

Remote or home working is hot a new 
scenario, but one that is gaining more 
ground as technology bridges the gap 
between the office and home. The recently 
departed Olympics were a great example of 
the practice in action. 

The government advised London-based 
businesses to consider flexible working, it 
seems that their words were heeded. with 
around a third of businesses encouraging 
flexible working during the supposed 
Greatest Show on Earth™. 


Cloud computing is one technology that 
helps bridge the gap between home and 
office. Andrew Gilbert. MD of cloud solution 
specialists Node4 said, '"Cloud computing 
removes the need for executives to 
physically travel to their offices to meet with 
each other face-to-face, thus offering a 
perfect solution to businesses to ensure 
smooth operations.' 

This is just one face of home working, it 
also has a host of other benefits, as Gary 
David Smith of Prism Total IT Solutions 
pointed out, 'Home working is more 
productive, greener and can save 
companies money.' 

For those who don't believe that workers 
will be as productive, the figures say 


otherwise. British Telecom - one of the 
pioneers of home working in Britain - has 
15.000 home workers among its 92,000 
staff. They report that they have found 
home workers 20 per cent more productive 
than office based staff, less likely to take 
days off due to illness, and save the 
company about £6.000 each every year in 
business expenses. 

Taking a slight sidestep, a report from 
online employment specialists Elance 
reveals record-breaking growth in online 
work, with earnings and job opportunities 
far outpacing the traditional employment 
economy. It seems there are plenty of 
pluses for working at home and online, so 
why Isnt it happening on a big scale? 


Great digital mags 

Visit greatdiRitalmafi s.com to get Web Designer on 
your favourite digital platform 

Web Designer, the premier magazine for aspiring online creatives has teamed up with 
Zinio, the leading digital publisher, to offer more options for getting your favourite 
magazine delivered in the formats you want to read. 

Imagine Publishing's new partnership with Zinio 
means that Web Designer is now available for PC, 

Mac. iPad. iPhone Android. Blackberry and Web OS. 

This means that wherever you are, you can get the 
latest cutting-edge practical projects, features, 
interviews and inspirational design showcases at 
your fingertips. 

Zinio provides the apps (db-zmioicomfepps/ 
indexjsp) reeded to get the best on-screen reading 
experience, while Web Designer provides the 
unmissable content 
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Who delivers the fastest 
CDN for jQuery? 

Choosing the right content delivery network can 
ensure best performance 

A report from Pingdorn Cbit .lv/NLFhfE3 has revealed that the most commonly used, and 
free, hosts of jQuery - Google. Microsoft, and Media Temple - have proved reliable, but 
with inconsistent performance. 

To evaluate the networks, Pingdorn performed tests from multiple locations across 
Europe and North America, once per minute, around the dock, over 30 days. The 
results found that all three offered excellent availability, but that wasn't the case for 
performance. For sites that don't use HTTPS or secure servers, Media Temple was by far 
the fastest. Google came a close second in Europe but lagged behind in North America. 
For HTTPS sites Google was the fastest in Europe, with Google and Microsoft similar in 
North America. Finally. Microsoft was 
deemed the worst performer in 
Europe, but on a par with Google in 
North America overall. 
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Bite-sized coverage of the month’s trending topics 


PhoneGap ssssT Mountain Lion 

. r reaches 
T versSon2 


Smartphones users lack security G' ^ - 

YouGov research. com miss c oed by sea. rily p mvicc C M 

smaripnones 

grabbing a smartphone rather than going to the 
desktop when visiting the web. 78 per cent of 
respondents choose the smartphone compared with ft 

57 per cent who chose their desktop. More * Client-side stack to change theface of 

wonyingly, only 19 per cent had protection installed M front-end development 
on their phones. 


W3C announces 
four new editors to 
replace Ian Hickson 


Yeoman iPad mini 


• Will we really beableto get our mitts on a mini 
iPad in September? 


Mountain Lion 
for Windows 

Not exactly, but software developer 
PARAGON Software Group has 
released NTFS for Mac OS X 1C 1 . This 
is a standalone Mac OS X 10.3 
-compatible application that allows 
for dual-boot users to access 
Windows partitions via an Apple 
Mac. With the software installed 
users will be able to create, delete or 
modify files as desired. 
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WIN A 5TB LIVEDRIVE 
ACCOUNT FOR A YEAR 



YOU COULD WINONEOFIO 
LIVEDRIVE PRO SUITE ACCOUNTS 
WORTH £150 EACH! 


L ivedrive helps creatives 
around the world back 
up their most precious 
files in confidence. Giving 
artists peace of mind with an 
incredible offering that protects 
files, the Livedrive Pro Suite account 
enables users to sync files between 
computers, access them anywhere 
through the cloud, while sharing 
content with colleagues and clients 
if needed. And all of this can be 
done without inducing any technical 
headaches: simply back up files to 
the doud and restore them at any 
time with just a single click, 


Whether you use a Mac or a PC, it 
works just like any other drive; drag 
and drop your files between your 
favourite apps and let Livedrive sync 
the files online between all of your 
computers for you, What's more, it's 
fast With industry-leading systems 
and software. Livedrive is quick, 
efficient and your upload/download 
speeds are never limited - you won't 
even know it's there! Visit www. 

I ivedrive.com/forhome/DrQsu ite t o 

find out more information. 

For a chance to win one of ten 
Pro Suite accounts, simply enter the 
competition by 19 September 2012 


WHATKTHELIVEDRIVE PROSUITE? 

• Pro Suite combines all Livedrive's features in one easy-to-use package 

• It gives you unlimited backup for up to five computers 

• A massive 5TB online syncing drive allows you to access files anywhere 

• The package even enables you to share with those not using Livedrive 

• FTP, SFTP and WebDAV access to Briefcase is available if needed 

• Apps for iPhone and Android mean you can stream files to your mobile 

• All data is stored securely in Livedrive's UK data centres 


HOW TO ENTER: 

For a chance to win one of ten Livedrive Pro Suite accounts worth 
L1SO each answer the simple question below. Send your answer to 
webdesigner@imagine-pubLi5hing.CQ.uk - subject 'Livedrive comp' 



How much storage does Livedrive’s 
Pro Suite account offer? 

A: 100 megabytes B: 512 gigabytes C: 5 terabytes 


TERMS & CONDITIONS Imagine Publishing and Its partners have the right to substitute the prize for a similar Item 
of equal or higher value. Employees of Imagine Publishing. Livedrive, their relatives or any agents are not eligible to enter. The editor's 
decision is final and no correspondence will be entered into. Prizes cannot be exchanged for cash. From time to time. Imagine Publishing 
or its agents may send you related material or special offers If you do not wanL to receive this, please state so clearly in your competition 
entry. All entrants agree to participate in any promotion related to this competition. The competition closes 19 September 2012. 
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Hosted 

technology, 

minus the headaches 

innW.TOMORRfflH MHlfUl® 


Whether you’re starting from scratch or a tech wizard, unreliable technology, 
limited product choice and a lack of support are all headaches you could do without. 

Fasthosts has been delivering industry-leading technologies, for thousan ds 
of customers just like you for over 13 years. With wholly-owned and managed 
secure UK data centres, dedicated 24/7 support and a team of experts, 

Fasthosts are always here, supporting you every step of the way. 


For help and advice call us now on QBOQ 6520 444 

Working with Fasthosts is smooth, from choosing a domain name 
or hosting and managing your website the process is simple . 

The support services are excellent and communication superb! 
i highly recommend Fasthosts to my clients and connections. 
Jules Thomas The Last Hurdle 

www thpl^hnr/fS/r rn uk 




Value for money 4 , 




\ v "x 


You’re our priority 

today, tomorrow and the future 


WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING 


fasthosts 


Making business work better online 


fasthosts.co.uk 

or call 0800 6520 444 
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Crowd 
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% to 6 



Your emails, tweets, forum comments. The social network, but in print 

This month we discuss Word Press security, the importance of web fonts, and how best to train as a designer or developer 


subject Sticky disc 


From Ken Toll 


I've been reading the mag for about four or five years, and a 
subscriber for about the past three. Over that time, while the 
magazine has got even better, the mounting of the free disc has got 
worse. I really hate to mutilate a magazine, just to get the disc! 

With the earlier clear plastic sleeves, I could remove the disc, and 
try and gently peel off the sleeve. The sleeve would be intact and 
usually I had an even's chance of not damaging the mag - unless 
they used a slightly different adhesive. 

Now with the card sleeves, I can't even get the sleeve off 
undamaged, let alone the Mag. Please can someone investigate the 
disc mount - and come up with a viable solution, or give us a URL to 
get the disc content from... 


Web Designer likes to keep its readers happy so 

your comment has been passed on to __ 

the relevant department. One 
solution is to keep the disc in 
the sleeve, simply take out 
disc when first received, 
copy the content to the 
desktop and pop it back , 
in the sleeve. Then 
when you want to use 
any of the content, install 
from the saved location. 


V. 


subject Fonts and PHP, 
do you agree? 

From Rog^rio Marques 


WebKit 

Discover the kit 
needed to help 
create inspirational 
and interactive web 
pages 



WordPress Backup 
toDropbox 

wpb2d.ccnn 



v\V' Vl ’Ki>Phl£S 


I realty liked your articles about 
fonts and PHP in issue 198 but 
somehow I felt compelled to write 
to you about just t hat 
The font revolution is maturing, 
we all know that, but everyone 
seems so excited about all this fuss 
that they seem to forget about 
print fonts (yeah I know that 
display fonts can be printed. I'll get 
there...) I believe it's time to start 
writing more about fonts that are 
used on paper, specifically those 
that allow us to reduce our costs 


Remember that saving a little 
here and there multiplied by 
several prints Is a lot, and In these 
times of contention can be a very 
good feature on any website that 
needs print reports 
In reading the article about PHP 
tips, there's the mention that 'PHP 
has Its problems, but then again, 
so do all languages' - and white I 
couldn't agree more, I just wanted 
to give my point of view as a 
computer programmer: it's not the 
language that defines the good or 
buggy program, its often the 
coder. I’ve programmed with a lot 
of languages (BASIC. Pascal. Turbo 
C & C++ Clipper. COBOL Visual 


oblivion and some are used 
according to what’s fashionable... 
But they all do have something 
called best practices, and these 
are Lo be used; these exist for a 
reason and they too evolve, so we 
coders need always be learning 
and evolving. 

Does anyone remember the 
GOTO command? Anyone? 

Let's start by saying we are very 
happy that you like the 
magazine. We have to say that 
there are some great points 
raised. What do Web Designer 
readers think? Let us know if 
you agree or disagree. 


Face book for WordPress 

deVel0Der5.racebQ0k.com/ 

wgrdprjss 



Redesign the Web 
bit.ly/qJSdvc 


and be economic. 

Although we have all these 
portable devices connected, there 
is stiB a need for printed reports, 
invoices and so on. 5o what about 
an article on those fonts that only 
print on the border, not filling 
inside (or similar) allowing Lo 
preserve the ink and the printer (or 
other similar techniques! 


FoxPro, Visual Basic. VBScript 
HTML, Java, JavaScript, ASR VBA, 
VB.NET, Delphi, CSS, PHRand 
each of them has their own pros 
and cons, some are better suited 
for Jobs than others and some are 
all rounders, but they all evolve 
through time. Some were 
forgotten and might rise again 
later, others seem to fall into 


Using Accordion 
for content 


From Douglas Toavs 


Do you know of any examples of 
using the JQuery accordion 
method to lay out extensive, 
in-depth content? Eg the 
equivalent of 13 pages of print 


It’s not the language that defines the good or 
huggy program, its often the coder tl 
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Join the conversation as it happens on Twitter 0 @WebDesignerMag 
Comment on the news and opinion @ www.webdesjgnermag.co.uk 
Email the editorial team at Q webdesigner@iniatdne-Dubllshlng.co.uk 


content placed in die accordion method subject In search of a great 

with ten subheads? Were considering this search function? 

method of avoiding layers of con tent and l ? r om Cliff Barragry 

would like to see it in use. ——-———--- 


The accordion method is an interesting 
option for displaying a lot of content* 
The BBC Sport site uses it to great 
effect, espec ially inthes ideba r. 
However, this doesn't display masses of 
content. Take a look at this site - bit.ly/ 
QewSjd - for an i mag inati ve way to 
display lots of content. Alternatively, 
take a look at this clever use of the 
accordion - biUv/fk3qzN. 

subject Thanks for the 
inspiration 

From Earl Varotia 


Hi I'm a big fan of your magazine and it 
really Inspired me to be creative in 
designing and developing for the web. So 
thank you, and please keep inspiring us. 
My portfolio site I just made, inspired by 
you ww w.ea rlva rona.co m 


lama huge fan of Web Designer. Great 
tutorials, I am currently doing a project in 
Word Press and I require a search form with 
multiple options, like a filtered search. This 
all seems very straightforward but I can't 
for the life of me find a tutorial or a plug-in 
that will do what I want. This is killing me as 
I have a limited PHP knowledge. Have you 
guys done a tutorial on this kind of thing? 
Or could you point me in the right 
direction? Any help you can give would be 
much appreciated. 

There are thousands of WordPress 
pi ug ■ i ns ava i la ble on t he ma rket. but 
finding the right one to fit your needs is 
not always that easy. Unfortunately, we 
do not have a tutorial to match your 
request, though we will definitely keep it 
in mind for a future issue, A plug-in worth 
checking out is the Multiple Category 
Selection Widget wordpress.org/ 
extend/plug in s/multi pie-category- 

selection -widget. This allows for 
multiple dropdown lists to narrow down 
a search and make the terms more 
specific. Alternatively, try this option at 
matt hewaprice.co m/searc h- mu Itip le- 

cuslomJlelds-i n- wordp ress. This allows 
the user to add different keywords to 
help filter a search, 

i# There are 
thousands of 
WordPress plug¬ 
ins on the 
market but 
finding the right 
is not always 
that easy §• 


Web Designer is here to inspire and help, 
and we love the portfolio site. 




Comments from 
the Blog 

• Web Designer is always 
keen to hear from its 
readers, followers and 
visitors. Here we bring together 
a specially selected collection 
from the last month 


©RMolletje 

©WebDesignerMag fm a 
loyal subscriber for over 3 
years now and do not like 
that <webkit> has been 
flushed. Why? Furthermore: 
great magi 

©thejamiefraser 
Who needs breakfast tv 
when you have the latest 
©WebOesigner Mag mag to 
read! (Breakfast is cold now 
though!) 

©create oblivion 
Unwinding after a hard 
week of finishing off works 
new website, time for some 
tutorials courtesy of @ 
WebDesignerMag #199 
which one first? 

©DesineCornwall 
Reclined on the sofa, 
enjoying the latest issue of 
©WebDesignerMag. 
Perfect, 

©deucecreative 
For lunch today I II be 
chomping through the 
latest ©webdesignermag 
- it's looking pretty tasty to 

©Mullins Daniel 
©WebDesignerMag still 
awake, still trying <tutorials>; 
thanks for t gr8 mag 
Icoding #webdesign #html 
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emotional and immersive , . _ .< 

experiences, For more BfilljElIIllJl J30] KQ 


information, visit www. 
bi^spaceshipcom 


Are HTML shortcuts damaging to your creativity? 


A s a child, calculator watches fascinated me. Third-grade 
swag factor aside, I marvelled at the idea of fooling my 
teachers into thinking 1 was a fashionable math ace. 
They would never know of my devious plan to secretly let a machine 
solve my exam questions, Unfortunately, I never had the money to 
buy one and by the time I did,, we were allowed to use calculators 
anyway In the end, not only did I have to learn to read time off that 
analog watch I got for my birthday, but I also had to take the hard 
route and learn how to add, subtract, multiply and divide. 

I often imagine what could have been if I had used a calculator 
from first grade. I would have blasted through exams as if they were 
a silly chore. Ultimately, I would have been stuck with entering in 
digits and generating abstract results in return. Would I have ever 
grasped the potential of what I could actually do with analysis, 
trigonometry and the like? I might never have realised that I can 
solve anything from the navigation systems used In satellites 
orbiting Earth to the (debatably equally significant) trajectories of 
birds being catapulted at green pigs. 

Fast forward from naive elementary-school self to naive present 
self. Coming from a Flash and animation background, l was used to 
a cotton-wool world, I would code something once and it would 
magically run on oodles of browsers and devices. It was rewarding 
and flexible with countless ways of solving the same problem. 

However, a year ago I left this happy place and faced fresh 
challenges. For me. the triumphant return of HTML and web 
standards meant learning new technologies. I did so with my first 
standards project for a beverage client, As an HTML-tenderfoot, I 
had an advantage: I was completely oblivious to the boundaries and 
limitations in this new world. Unsuspecting as l was, I pushed for 
more and more elaborate designs and visuals with the desire to 
create something that would capture the level of Immersion we 
were all used to from Flash. In the end, we were able to create 
something unique that bent the venerable norm of standards 
websites at the time. We let our idea dictate the technology. 


During my first excursion to standards-land. countless late nights 
taught me valuable lessons. Creating expressive experiences came 
at the high price of fragmentation. Suddenly, we had to account for 
platforms, devices and browsers. Whereas creating a gratifying 
visual effect in Flash was a matter of applying the right timing and 
easing to an animation, with web standards it meant doing the same 
thing for one platform and then altering it entirely tor others. 

Luckily. Web Standards have an Incredibly talented, ever-growing 
community ready to swoop in for the rescue. There is a startling 
abundance of amazing frameworks, libraries, utilities, code-snippets, 
gists, forks and services to solve this fragmentation with abstraction. 
Above all, jQuery became the Swiss Army knife of my utility belt for 
all things cross-browser abstraction. Suddenly, tasks I deemed as 
tedious were done for me automatically behind the curtains. 5oon, 
the ubiquitous Inclusion of |query.mln.|s was accompanied by an 
ever-growing army of fellow community creations. Any complex 
problem that needed solving? The Internet probably had a solution 
ready for me. and the utility belt kept growing. 

After a while I became suspicious: grid frameworks determined 
our layouts, Typekit chose our fonts, and animations defaulted to 
easeOutQuad. Building something new and unique had turned into 
an orchestration of pre-existing pieces, All I had to do was lay out the 
string and tie those pieces together. 

That's when It struck me: this utility belt had become the calculator 
watch. I didn't know or understand what was going on under the 
hood anymore. I realised that I had started to delegate my curiosity 
to the Swiss Army Knife. Technology was dictating my ideas. 

Abstraction isn't inherently bad. Frameworks like Processing take 
away all the unnecessary baggage of low level languages. JQuery 
does the same deed for standards by Ironing out the scattered 
browser landscape. However. In striving for Innovation, we can't 
become complacent with the defaults we've grown accustomed to. 
Every once in a while we must risk breaking things and tearing them 
apart to push beyond what's Just good enough into what is great. 


Any complex problem that needed solving? The Internet 
probably had a solution ready for me 
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Working for 
killer clients 


<lieader> 


comment 


Devin Silberfein is the chief operating 
officer at Flash tr allblazers 2 Advanced 
Studios. Based in the California hills , 
he has over a decade of on-the -job 
experience in interactive, web 
and mobile de velopment 
andanever-say-die 
attitude to getting 
things done. 


Devin 

Silberfein 


If they don’t kill you, they will only make you stronger 


T o recycle (and modify) an old saying: clients, you can t live 
with them, and you can't live without them. That Is the nature 
of our industry. We all have internal, back-burner projects Capps?) 
that we'll eventually finish and launch to wild reviews. Well sell them and 
retire young. Until then though, we spend most of our hours on client 
work. After all, clients afford us the opportunity to create things for the 
masses on a daily basis, while providing a level of variety that most of us 
need, else we'd go crazy. 

In our 13 years and over 1.000 projects, 2Advanced has had some 
great clients and our fair share of challenging ones. In time, those 
challenges make us stronger and more capable. My eleventh grade 
English teacher wasn't a big fan of my work, but 1 probably learned more 
from him challenging it than I did from any other teacher or professor. 

Here are the dients who like Mr Pepe in high school have taught me 
the most (albeit accidentally). 

'Here's the thing, we need to launch in 30 days; 

We've seen new and return dients come to us with that three-month 
project and only a month to do iL It'd be suicide to take on their work, but 
we've all done it - often because it really was a cool project and we 
wanted to prove we could do it And that's exactly how this client has 
made our team better. By sheer will the team pulls out a miracle and our 
confidence as a group rises, Suddenly the three-month projects are 
easy. If not boring. Additionally, when we put our process to a stress test 
like this, we team what works and what doesn't 
I have a background in design.' 

Too many times I've had dients Idl me about their background in 
design. I'm not sure if this is meant as a compassionate play ('see, I'm just 
like you') or a challenge Cl know what I'm talking about so you'll have to 
try harder to 'wow' me}, but either way I see it as a warning sign. 
Regardless of the validity of their opinion, we end up defending our 
designs, and in time well look at our work more critically to make sure It's 
bulletproof. In doing so we find things to improve that we otherwise 
wouldn't have even considered, that ultimately make for a belter product 
and happier dient 

Looks Fantastic! Just one more thing/ 

We recently wrapped up a design project which easily set the record 
here at 2Advanced for 'one more thing emails. Every time we delivered 
an updated comp our dient was ecstatic - loved it and graciously 


thanked us - but they Just had one little change. Scope and budget 
Issues aside, this was especially challenging as we teetered at the edge of 
completion almost indefinitely only to get sucked back in for one more 
round' of revisions. Adding to the frustration, we knew that each revision 
weakened the design incrementally. In the end though, this was a lesson 
in detachment and patience. We fight to do great work, but it's our client's 
name on the line and they know their needs and customers better than 
■we do. Just remember to breathe.: Itll be okay. 

Our office Is still using IE3, so we need to target that.' 

When I look at penetration rates for different browsers, I always 
wonder how many of those IE users are the dients of the world, under 
corporate lockdown. Without turning this into a browser debate, it stll 
warrants some consideration when clients are myopically focused on 
what it looks like within their walls and not on their customers' screens. A 
dient on IE8 means nothing if the target audience mostly uses Chrome. 
If we must deal with older browser versions, we approach things from a 
standpoint of progressive enhancement' (a more glass-half-full version 
of 'graceful degradation'). We will design for ideal situations and also 
create a mock-up showing how older versions will perform. Once we 
have buy-off on that, we have a lot of room to optimise for each browser 
In the end, we’re on top of browser compatibility issues and we sleep well 
knowing that we provided the best possible experience for all users, 

We can t decide, so let's combine elements of both designs/ 

Its been statistically proven that if you produce two unique comps for 
a dient 78 per cent of the time, they'll come back with an answer like this 
I like to think of this as a good thing because it means two designers both 
hit the mark, It's a more complicated situation in practice, though there is 
an upside to this, Much like the dient above who challenges everything 
you put together, we end up looking at our work under a microscope; 
and It's stronger In the long run because of it With two designs each 
partially hitting the nail on the head, the new task is taking what's right 
from each without creating franken-oomp. This is a challenge for sure, 
but any lime we can rise above a challenge, we know we're making 
ourselves better. 

All ot these lessons were learned with the gift of hindsight At the time, 
expletives were muttered, drinks were had and computer mice were 
thrown, al to handle the frustrations. Remind me of that next time my 
mouse makes It to the other side of the room. 
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Life after 
Flash 


Patrick is responsible lor driving and 
shaping R/GA's technological vision, 
while also working closely with 
clients to help develop their 
strategic tec hrucal requirements. 
Prior to this, Patrick was 
director of engineer! ng at 
the Walt Disney 
Company. 


Patrick Van Kami 


Flash is dead, so let’s build a better Internet - with responsible JavaScript 


M ost developers celebrate the rise of HTML5 and JavaScript 
as the dominant rich Internet application technology hut 
few could have dared hope that Flash would disappear so 

quickly Incur enthusiasm to build a new Internet on open standards, we 
must be careful not to make the same mistakes with HTML5. 

Flash was the standard for rich content on the Internet, mainly 
because there was no other option. Browsers did not support animations 
or web video natively, forcing developers to use plug-ins. Flash defeated 
competing plug-ins like Real Player and Microsoft SltverllghL According 
to Adobe, it's available on 98 per cent of desktop browsers. 

The only non-plug-in option for rich content JavaScript suffered from 
the inconsistent way that it was implemented in different browsers, 
making cross-platform code difficult - but worse, many web developers 
(myself Inducted) considered it a toy language in comparison with Java. 
JavaScript was confined to basic tasks such as form validation, dynamic 
navigations and bask: content manipulation. 

Although Flash achieved dominance few regarded it as a good 
technology. Flash content was rich, but it was hidden from search 
engines, slow to download and confusing to users who tried to use 
browser controls like the back button, There just had to be a better way. 

Even bdore Apples refusal to include a Flash player in iOS, there was 
a growing realization that JavaScript and HTML were undergoing a 
renaissance making it a viable alternative to Flash for RIA development 
- even without the new mecte features offered by HTML5 and CSS3. 

How did this mirade transformation occur? First JavaScript’s critics 
had underestimated its capabilities for functional programming, which 
gives it flexibility, elegance and power. jQuery and other libraries showed 
JavaScript could be used for serious engineering- even high-concurrency 
server-side platforms can be made through Node.is. 

(Query also made cross-browser JavaScript applications possible by 
providing universal abstractions over different browsers. And on top of 
JQuery cpenrsource developers built an array of new libraries around 
QtHub, including code analysis tools, test-driven development tools, and 
optimising frameworks-to modem application stacks in pure JavaScript. 

(Query's fluent API and ability to mitigate browser fragmentation 
made JavaScript's popularity hugely possible, but it is not the only 
alternative. Frameworks like MooTods or Prototype have their adherents 
- although no other library has been as widely adopted as (Query. 


The success of other non-corn pi led languages like Ruby and Python 
has shown that a compiler Is not essential for building large-scale 
applications ■ unit tests and code analysis can replace or even extend 
the protection they offer. 

Test frameworks Ike JsTestDriver and Phantom JS enable browsertess 
testing from command lime or build script For actually writing unit tests, 
Jasmine and QUnit are leading the pack. For those ready to take testing 
to the next level. Simon provides mocks, spies and matchers that enable 
you to write fine-grained tests where collaborating components are 
faked to Isolate individual code units for testing. 

JSLint is a widely used code analysis tool, which promises to hurt your 
feelings and make you a better programmer. And for those 'who find 
JSLint's flinty critiques loo harsh there is the gentler JSHinl tool. 

To reduce the browser footprint of your JavaScript - both in terms of 
HTTP requests and in download size - there are numerous options for 
minifying or uglifying multiple script flies Into a single download. The YUI 
Compressor is most well known but also check out Google's Closure 
compiler and UglifyJS. 

There are new many full application stacks, including model-view- 
controller platforms like Backbone, Spine and AngularJS A completely 
browser-based JavaScript application can be built without the need for 
server-side scripting (other than a REST API to handle data requests). 

All of this has created new possibilities for JavaScript engineers - but 
also new risks. As the capabilities of modern browsers enable more 
sophisticated and exciting interactions, many of us fall in to toe trap of 
exploiting these opportunities without casting an eye back to our recent 
experience with Flash. The temptation to add imaginative interactions in 
the frontend is leading to practices that give poor browser performance, 
and cope poorly with the increasing number of mobile devices used to 
view our sites. Careful technical design (s as critical as ever 

A colleague of mine at R/GA London often uses a quote in a talk on 
this very subject where he references Jeff Goldblum's character in 
Jurassic Park, saying ",.your scientists where so preoccupied with 
whether they could, they didn't stop to think if they should’ 

5g nexttimeyou are building a totesamazeballs' parallax extravaganza 
in HTML5 and JavaScript, take a step back. Try to think about how it wil 
work on a mobile device on 3G. Users won't congratulate you for using 
web standards if they have to wait three minutes for the page to load. 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can seta daily spending limit and an amount you're happy to pay for people to dick 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, lfyou J d rather, promote yourself to a global audience 
round the dock. 


Voucher missing? 


Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 

£50.00* free advertising credit 

with Google AdWords for your business. 

No minimum term or commitment 

Offer only available to businesses in the UK. 




Don't miss out - try it today 

We're offering£50.00* free Google AdWords 
advertising credit for business users**. There's 
no obligation to continue - you're in control. 

To start attracting new customers today: 


Visit fioog lexo. u k/ads/start 


Or call 0800 169 0478* 



***Calls to 0300 numbers are free from BT land lines but charges may apply ffyou use another phone company, call from your mobile phone 
or call from abroad. 

^Ternns and conditions apply. Promotional credit can only be used Tor .AdWords accounts that are less than 14 days old by advertisers with 
a billing address in the UK. Advertisers will be charged Tor advertising that exceeds the promotional credit. Advertisers will need to suspend 
their ads if they do not wish to receive additional charges beyond the free credit amount Offer subject to ad approval, valid registration and 
acceptance of the Google AdWords Programme standard terms and conditions, The promotional credit is norrtransferable and may not be 
sold or bartered. In some cases, advertisers who choose prepay billing may be subject to a £10 minimum prepayment before their account is 
activated. Any such prepay amount will be credited to Advertiser's account once account is activated. One promotional credit per customer. 
For full terms and conditions please visil hrln^/wv/iw.gnagle.cn.ukj'ariword wnucherlerms, Google Ireland Limited, a company incorporated 
under the laws of Ireland, with company registration number 36RD47 and registered office address at Gordon House, Barrow street, Dublin 4. 
Ireland, Copyright 5012, Google and Gnngle AdWords are trademarks ofGnagle Inc, and are registered in the US and other countries, 
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u For new developers, WordPress 
can be like a gateway drug ” 


WordPress is synonymous with the web, it 
revolutionised the site- bull ding process and now 
accounts for around 16 per cent of sites on the 
Internet. The name and face behind the publishing 
platform is none other than Matt Mullenweg. In 2005 
he founded Automatic, which grew into the now 
impossible to ignore WordPress. 

With WordPress approaching its tenth birthday, Web 
Designer got to speak to Matt on the past, present, and 
tutu re of the platform. He reveals how WordPress is a 
gateway to web design, the focus on improvements 
over the next 12 months, and the challenge of shifting 
to the mobile arena. 

WordPress is fast approaching its tenth birthday, How 
has the platform changed and why do you think it 
has been so successful? 

Where to start! When Mike Little and I were throwing 
ideas back and forth about the first release of 
WordPress I don't think either of us would have 
imagined where it has ended up today 

In the beginning we were totally focused on 
blogging, mostly for our own use. and in those 
formative years the community laid down the 
foundation for much of what were known for today 
including the ease of set up, customisation, and a 
fanatical focus on authors. We really wanted to build a 
great environment for authors to create in. That's why 
even today consultants choose WordPress because 
they can train clients in a fraction of the time it would 
take with other systems; it was that initial focus on 
regular end-users. 

The second mam phase was WordPress becoming a 
CMS. I saw a pretty clear need in our community from 
folks who wanted more than just a blog, they wanted 
the WordPress ease of use for the«r entire site. We 
started to think about what it would look like from an 
architecture point of view to manage content outside of 



a normal blog chronology, figured out a pretty elegant 
way to do it. added the page and theme frameworks 
we still use today, and finally introduced WYSIWYG 
shortly thereafter. Those seeds kept growing and finally 
matured in our 3.0 release when we made it easier for 
developers to use Custom Post Types to manage hot 
just posts and pages, but really any type of content you 
can imagine inside of WordPress, whether it's albums, 
real estate listings, events, or really anything. 

The phase we're in now is WordPress as an 
application platform. As our developer community has 
grown up, and experienced the flexibility of Custom 
Fields, Post Types, and formats, they're starting to build 
applications on top of the WordPress framework, or as 
plug-ins, that don't look like WordPress at all. 
BuddyPress, bbPress.and the commerce plug-ins like 
WP e-Commerce and WooCommerce are good 
examples of this, tx.it I think there's way more coming 
down the road in places you'd never expect, like Spotify, 
which uses WordPress for its website. There's probably 
someone reading this very magazine who's going to 
build the next big thing or service using WordPress 
behind-the-scenes, beyond what I can even imagine 
nght now. 

The WordPress platform has been adopted by 
millions of designers and developers. Do you think 
that WordPress is removing the technical element of 
the design process, or encouraging a new generation 
of designers and developers? 

1 think for new developers. WordPress can be like a 
gateway drug. You can create great-looking sites 
without writing a line of code, but if you're serious about 
your craft soon you'll want to colour a bit outside the 
lines. You'll start to pick up a bit of CSS to customise 
things, or a little jQuery to do an effect a client is asking 
for. and next thing you know you’re knee-deep in PHIP I 
love that! 

It's a lot hew my own story was - I didn't learn a 
single line of HTML. CSS. or PHP in school, it was 
something i picked up along the way as I wanted to do 
more and more with the sites I was building. I read 
blogs I ke zeldman.com and meverweb.com, books, 
and tutonais all over the web. 

That's not just the future generation of web 
developers, it's the future of learning in general. There is 
more information put online every day than any of us 
could consume in our lifetimes, the only limits to what 
you learn are an internet connection and your curiosity. 

WordPress is a champion of open source and open 
standards. The community is constantly pushing the 
platform forward. How big Is the community, what Is 
its purpose and how can people get involved? 


The community has really surprised me in its growth: 
there are about a dozen core developers, 150 core 
cont-ibutors. about 300 active community volunteers 
on ' WordPress org 20,000+ plug-in and theme 
developers, and I est mate over 100.000 people 
making their living from WordPress as consultants, 
designers, developers, and writers. 

The development side is pretty amazing to be a part 
of - you can't walk up to Google and ask to write code 
with their best engineers, but you can post a patch on 
the WordPress bug tracker and have a conversation 
with some of the best PHP developers in the world just 
a few minutes later. As the community has grown it can 
be intimidating to get involved, so we published a Core 
Contributor Handbook, like an open source field guide 
to getting involved with development ■ make, 
wordoress-Q rq /c ore/han d boo k. And even if you can't 
write a line of code, there are a lot of ways to get 
involved with the forums, documentation, design, and 
more. It's a very open and welcoming community. 

As WordPress has grown, so has the market 
surrounding the platform. Themes and plug-ins are 
key components. Is this something you like to 
promote and encourage, while also keeping an eye 
on quality and credibility? 

Plug-in quality and security has been a huge focus for 
us this year. For security we've started proactively 
scanning and flagging all of the 20,000+ hosted 
plug-ins. We've fixed hundreds and hundreds of 
problems and pushed the updates out to all WordPress 
users, as well as helped educate plug-in authors on how 
to code In a more secure fashion. 

Second, we've had some pretty effective redesigns in 
the piug-in directory to give people more indications of 
quality. For example, instead of just showing the star 
rating, we now show how many support threads that 
plug-in has and how many of them are resolved. That's 
more than a rating that will tell you how active the 
plug-in authors are in supporting their work, which is an 
excellent sign of quality, 

What is the focus for updates/!improvements to 
WordPress over the next 12 months? 

I'm focused on three main things: 

L The core development team looking at making the 
media experience better, especially around how you 
upload and interact with photos, galleries, and featured 
images, I think users will appreciate this a lot, 

2, Through the Jetpack plug-in Automattic is helping 
make WordPress more social, to make it easy for your 
visitors to share and comment using their Twitter and 
Facebook accounts, for people to subscribe via email, 
and in general to leverage the cloud services of 
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u I saw a pretty 
clear need in oil - 
community fromi 
folks who wanted* 
more than a blog * 
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WonJPmss-g^to make WordPress more capable. 

3. At the heart of Word Press is customisation, and we 
want to make it more accessible for users to customise 
their sites without having to dive into theme code. 
Developers will be able to leverage these APIs to give 
their clients more ability to update their site and be 
independent, which is also exciting. 

Beyond the short-term future of Word Press, what 
challenges lie ahead for the platform over the next 
ten years? 

Our biggest challenge is the shift to mobile phones and 
tablets. WordPress was born, and grew up. in a desktop 
world, However every year we've increased our 
investment in our mobile apps and it's paid off with 
more than 4 million users already. We need to bring 
everything people love about WordPress in the browser 
- the flexibility, customisability, and usability - to native 
clients. Ten years from now there will be a dominant 
CMS on the tablet side of things, and whether it's us or 
not depends on how well we make this transition, 

As a man with his finger on the pulse of web 
publishing, what do you expect, or hope to be the 
next big thing? 

I’m really excited about responsive design, as much for 
its elegance as the fact that people are really thinking 
about their site as something that's experienced on 
different screens and in different contexts. The best 
thing about people giving more thought to mobile, or 
even thinking mobile-first, is that they're reconsidenng 
what the most crucial aspects of their web presence is 


and paring things down to the bare essentials. That 
simplification is extraordinarily hard for organisations to 
do, but they're forced to by the constraints of the 
mobile platform; and when they seethe sky didn’t fall 
down that reduction can make its way back upstream 
to the desktop experience. 

WeVe been having the same experience In 
WordPress. The mobile apps have been inspiring me on 
how we can pare down our dashboard and make a 
radically simpler WordPress. 

Beyond WordPress. you have been involved in a host 
of different startups such as Akismet and Polldaddy. 
As a veteran when it comes to putting startups Into 
practice, what advice would you give to anyone 
looking to start their own online enterprise? 

Thing single most important thing is the people you 
work with. Find people who are as passionate as you. 
share the same values, and who you want to stick with 
in good times and In bad. 

You have been touted as one of The Top 10 Most 
Influential People Online‘ by a number of 
publications, only superseded by such notable web 
luminaries as Mark Zuckerberg, Larry Page and Steve 
Jobs. That's good company, but how do you view 
your achievements to date? 
it's very humbling, and above anything its a testament 
to the people I've had the good fortune of working with. 
I don't think we're done yet. there is so much work left 
to do still. I wake up every morning excited about the 
challenges ahead. 


Finally, in keeping with our two-hundredth issue, 
what tools and themes would you recommend? 

How that wete responsible for over 16 per cent of 
websites. I think these are essential additions 
For WordPress the following tools and themes; 

1. Jetpack - includes stats, contact forms, sharing 
buttons, email subscriptions, and more, ( ietpack.me) 

2, VaultPress - bulletproof backup and security for 
business WordPress blogs, ( vaultpressxom l 

3, Akismet the best anti -spam around. fakismet.com) 

4. P2 Theme - an internal Yammer or Socialcast that 
you can run anyplace you can run WordPress. 

( p2theme com} 

5. j theme - it's a terrible name, but check it out here. 

bit.lv/w4csYF 

6, Theme Check - make sure your WP theme is up to 
snuff, code-wise, f wordoress. am /exten d/p I uq- in sf 
theme-check ) 

For third-party tools these are an ideal choice: 

1. Facebook for WordPress - an official plug-in from FB 
to connect your biog to the biggest social network in 
the world. 

2. WP-Super Cache - caches and speeds up your 
WordPress, so it can run as fast as possible. 

3. Email Post Changes - emails you a diff any time a 
WordPress page or post is changed, Great tor keeping^ 
up with changes on multi-author sites, 

4. AH in one SE0 - has a tonne of settings for SEG- 
optimising your site. 

5. bbPress - Now bbPress is a plug-in so you can 
drop-»n forums to your WP-powered site with Just a few 
clicks, no need to try and integrate templates. 


















# heart internet 

UK’s MOST ADVANCED 
RESELLER HOSTING 

Sign up to our award winning Reseller Hosting and sell unlimited websites with unlimited 
web space, bandwidth, databases, email and more, all at no extra cost. 
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The complete Reseller Hosting solution 

Sell unlimited websites and domain names, as well as our wide range of additional products to 
fit your customer's needs, Use our hosting billing & CRM solution 'HostPay' to sell in real time. 

100% YOUR brand 

Every aspect of your hosting is while label and can be branded as your own, including your 
customer's control panel, web mail, welcome emails and anything else you can think of! 

Create your own packages 

Customise each account to any level you like. From how much web space and bandwidth 
your customers get, to selecting what web apps they can install from their control panel. 


24/7 UK support 

We don’t employ any contractors, temps or external support services; all our support 
team are 100% based in our UK offices and full time members of staff. 

No hidden fees 






Increase your proms with 
exclusive reseller discounts 


G Dedicated Servers 
C Virtual Servers 
C goMobi 
G SSL Certificates 

G Hosted Exchange 
G Premium Email 

£ Bulk Domain Names 


66 Heart Internet support their 

customers with market4emJlng 
hosting technology si 
greet prices 


All the features you need to attract and manage customers are included as standard. Unlike Suzi Perry 
our competitors we don't charge you for basic functionality, such as your customers getting a J ' Jq f 
brandable web hosting control panel or additional MySQL databases. 




As well as selling unlimited websites, pick and choose from a wide range of additional products. Including 


Sell Virtual Servers 

Only £8.99 per month 


Sell Hosted Exchange 

Only £4.99 per mailbox 


/ Create your own VPS packages 

/ Rill API Integration / 

/ Linux & Windows 1 

V Dell A Intel hardware 

/ Full white label control panel for 
* your customers 

/ Sell VPS In reel time 


/ MS Exchange 2010 as standard 

j Free OuBook 2010 for you 4 i 
your customers 

10GB storage * 

/ Transfer in Exchange 2003 4 
2007 easily 

y/ Sail Exchange in real time 


Unux 4 Windows 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 

Normtt Price from only E29.9S ptr month 


# heart internet 

www.heartinternet.co.uk 

Web hosting I Reseller hosting I VPS I Servers 









Nespresso Naora 

www.nespresso.com/naora 

Development technologic* HTMLS.JQuery 



Designer Hello Monday 

www.hellomondav.com 

Fluid video and layered graphics give this limited 
edition site a sense of emersion in the story it is telling 


£"£££££! asked with 

i******** 

• ••••*#•£ communicating a 

** ***** 

It ::::: complex marketing 

message involving how 
late harvesting is used 
within the coffee 

** 

Industry. Hello Monday 
created an emotive site 
that is a masterclass in 
the use of online video. 
After loading, the viewer 
is drawn into the site with easy access 
to the Nespresso Naora story. 

Hello Monday explains its approach: 
"We identified the main task of the site 
as being a playful and immersive 
presentation of the videos that carry 
the experience. We felt the need to add 
specific interactive features, eg a 
‘ripeness slider' that allowed the user to 


get a perspective of the issues of timing 
involved in the coffee making process." 

The site is also built to allow access 
on a number of platforms. The desktop 
version uses Flash, with the version 
aimed at mobile users optimised with 
HTML. This may break with trend for 
responsive design, but Hello Monday 
felt that this was the best way to present 
the site to as many potential viewers as 
possible, and keep the user experience 
intactacrossall platforms. 

Striking in its use of 3D and video, 
this site shows the technical prowess 
that Hello Monday posses. The site is 
massively optimised to ensure a 
smooth viewing experience. Graphics, 
video and user interaction come 
together on a site that is at the cutting 
edge of interactive design. 


§ I We identified the main task of the site as 
being a playful and immersive presentation 
of - and navigation between - the videos 
that carry the experience IP ! 



c Above* 

* The photorealistic graphics combine with 
smooth scrolling to offer a "window’ into the site 


SF3D3HE 



AAC73E7 *766.033 



A321932 *A85752 ft9!543C 


abcABC 1234567890 


<Ahinre> 

* Fmligerwas developed in 1&68 by the legendary 
type designer Adrian Frutiger, The typeface is 
available from Linotype 


26 


lightbox 



































Got it? Flaunt it! Tell us about your site ^ webdesigner@imagine-publishin 
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(Below* 

- The layered graphics and interactive 
■coimpo nents offer a depth to the sorolll ng 
homepage that instantly engages with the visitor 




* Full-matlan video is augmented 
with interactive graphics, which 
allows tiie viewer to access more 
detailed information 
*The graphic panels overlay 
beautifully when the video is paused. 
The site is an exem pla r y model or 
responsive des ign I n every way 
•The ripeness slider gives the viewer 
an insight into how the late harvest 
influences the taste of the coffee 
- Branding and the commercial 
aspects or the site are nut forgotten, 
ottering visitors full a fully functioning 
eGommerce capability 
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Know a site that deserves to grace these pages? Tweet us now Q@webdesignermag 


BokicaBo 

www.bokicabo.com/en 

Itavulopittant technologies MTML5, jQoery. CSS3, Vlmeo Froogaloop API 



Designer Nikola Arezina 

www.berqb.com 

The creative use of video is at the heart of 
this site that showcases the handmade 
clothes of this Serbian designer 


ZZZl mall sinesses can now 

lllltlltl compete with even large 

***** fashion labels using sites 

like this. Nikola Are2ina 
t dearly understands the 

***“::*** power that video now 

•ZZiSII has within the 

"*!”**** eCom merce space. 

Using a combination of 
technologies.. the 
innocuous looking 
homepage of this site is a gateway to 
creative video footage of the designer's 
handmade clothing range 
Areiina explains the thinking behind 
the site's design: "The main idea was to 
draw attention to fashion by using the 
web as a medium of promotion rather 
than retying on conventional and 
expensive ways of advertisement. I 
think that this version of the site Is our 


best yet and illustrates the positive 
energy we have towards the project." 

The use of video across the site 
allowed Nikola to showcase the fashion 
designs of BokicaBo with Innovative 
video using the Vlmeo API. With a 
limited budget it illustrates that with a 
little creativity and an understanding of 
what the brand offers, engaging video* 
based content can be created. 

This small and exclusive brand uses 
traditional photo shoots, well-chosen 
typography and fun video footage to 
create a site that engages with the 
visitor, offering easily accessible 
information wrapped in a piece of 
seamless design. Nikola clearly 
understands how to present this brand 
and brings his design skills to the fore 
with each page element expertly 
delivered to the viewer. 


I ll I think that this version of the site is our 
best yet and illustrates the positive energy 
we have towards the project III 1 



<Ab»Vu> 

* The new site for BokicaBo showcases the new 
fashion range via engaging video footage 



<flhove> 

-The expert use of full HD-<quallty video footage 
shows off the exc luslve handmade collection of 
the designer 
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<Top left, CKithWlHO 



* The video can be paused and 
the clothing on show looked at 
in high ■ resol ution deta il 

* The previous collections or the 
designer can also be accessed 
via a well-developed vertical 
scroll micioslte 

* As eac h p lece of clothlng Is 
handmade, simple access to the 
buyl ng option s Is always j ust a 
dick away 

* The older pieces In the 
BoklcaBo col lection use 
traditional static imagery that is 
professionally presented 



#a?AJB1 flDF0450 JTFBCD47 



flCACBCS flE0235O AS301D0 


abcABC 

1234567890 

abcABC 

1234567890 

<Abovetop> 

■ Rooney from Jan Fromm Is an original font from 
the designer who has been working sine 2003, 
and is available rrom Type* kit 

<Above> 

■ Ron n ia was desi gned by Veronl ka Bu ria n and 
JoseScagllone who are better known as 
TypeTogefher, The font is available from Typekit 
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Know a site that deserves to grace these pages? Tweet us now Q@webdesignermag 



* Tlie one-page verb ca I scrol ll ng site 
packs, in the content to showcase 
the studio's many talents 



^Afaiwes* sflbPVu* 

* The short vertical sera II of the site is a great deslgn feature The visitor is invited ta open ad ditlonal w inflows to view - The Hexagon Factor y's design places the people bemnd Place 

that the developers execute With ease detailed I nformation about the studio's ser vices Cliche front: and centre 
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<Delow^ 

* Bebas Neue I s anIm proved version or the earlier 
font Bebas created ip 2005 bv Dfiarma Type, 
whsra me font I? a free download 

ABCflBC 

1234567890 



<J\1MpVu> 

* The header on the site Is a typlea I exa m pie of 
how the designers have used bald images as a key 
design statement 


Place Cliche 

www.placecliche.com 

Development t('4:tiiiQ]oyii'!i CSS3. jQuery 



Designer Benjamin Cochois 

www.hexaqonfactory.com 

A superbly realised site that showcases the wide 
range of services on offer from the Place Cliche 
studio is a feast for the eye 


he brief for the Hexagon Factory 
was to showcase the services 
l !mm available from Place Cl i th£. As the 
studio prides itself on high-quality 
imagery, this site is dominated by 
pin-sharp images that give each 
page a high quality presence. 

Says developer Benjamin 
Cochois: Tlace Cliche Is a 
professional photo arid video 
studio, so we decided LhaL the 
design should be based on hi-res pictures. The 
main content is hidden by default, and users 
need to click on sections titles in order to 
make it appear, so they can enjoy huge high- 
quality background Images first then learn 
more about the studio only if they want to" 


Using the now familiar vertical scroll 
technique, the Hexagon Factory didn't want 
the site to be a passive experience. The hidden 
content slides into view with a simple click on 
each window, that themselves horizontally 
scroll - this works as a great counterpoint to 
the vertical scroll Static images mix with video 
and text to deliver a site that speaks volumes 
about Cochois' understanding of his client. 

Stylistic in its approach, this site is also 
eminently functional as well. Prospective 
clients of Place Cliche will be in no doubt about 
the studio's competence, and with the 
Hexagon Factory's design perfectly 
complementing the studio's brand values, this 
site is a great example of how a business' web 
presence doesn't have to be conservative. 


i § Static images mix with video and text to 
deliver a site that speaks volumes about 
Cochois’ understanding of his client 9P 


31 


lighLbox 














































I 

<clesign <liary> 

| experience SON Y 


Design diary 

Ride the development cycle 



Ni kki DeFco,. creative 
' copy director^ 


^[Kristin Keefe,M 
exe eutive prod u cer 




Project experience SONY 

Web I expofteoce-soMfy-oon 1 
Company I Firstborn 

Web l www.fivstboni.corw 


New York strategists, designers, 
and technologists took up the 
challenge to make users believe in 
the Sony experience 

The Sony brand is a global phenomenon that 
has been an integral part of the technology 
revolution - think Walkman or PlayStation for 
starters - they are leaders in a host of fields. 

Firstborn, translator of engaging, intelligent 
and innovative user experiences, joined forces 
with Sony to help remind the consumer that 
there is much more to the digital behemoth 
than meets the eye. 

Gabe Garner and Nikki DeFea The brand 
recognition of Sony is outstanding - nearly 
everyone has owned a Sony product at some 
point in their lives. The problem is r people 
generally think of Sony as an electronics brand 
and don't know all the other things it doesc it 
creates epic video games; it's one of the 
leader's In the movie industry; it signs some of 
the best names in music, it makes things that 
fans crave, but no one associates their 
favourite blockbuster hit with Sony. It's the type 
of problem we love to solve. We set out to 
make a great brand seem more relevant with a 
younger demographic, and insert it straight 
into their culture. 

"Sony’s brand message is make-believe, it 
means that anything you can imagine, you can 
make real. We had to bring this to life in a 360 
program that was heavily rooted in digital. And. 
we had to do it in a way that only Sony could, 
one that reached our younger audience? 


Jennifer Xin, 
art director 


Aaron Pol lick, 
creative director 


Sony is not short on new commodities - NEX, Amazing Spiderman. 
Firstborn decided that it would make unexpected combinations 

Garner and DeFeor "Taking .he varies well-known Around me same time. Bony was .aur 


Sony properties, we asked ourselves what It would be 
like if we combined them to create something 
completely hew. What if we took a musical artist add 
combined it with the new Sony tablet? A blockbuster hit 
with a cutting-edge camera? This became our formula for 
developing our ideas into make.bef&eve experiences. 

We took a look at the big Sony Launches In the 
upcoming year We had a playground to choose from: big 
artists were getting signed, one of the most anticipated 
games of the year was being released and exciting movies 
were hitting theatres. One of the properties that really 
caught our eye was The Amazing Spider-Man reboot. We 
knew that it would be fun to concept and already had a 


f-, r y h=,cji nf paripr followers 


Around the same time. Bony was Launching their new 
professional grade portable camera, the NEX. We thought 
it would be interesting to combine the NEX with The 
Amazing Spider-Mart. 

"After going through several rounds of ideas,, we landed 
on one that captured the essence of make,believe and 
allowed us to bring imagination to life. 

We created an interactive panorama that told the story 
of The Amazing Spider-man chasing crooks through 
Manhattan. When it was first launched on the make-believe 
hub. it was incomplete-it was missing characters that were 
needed to finish the story. We asked fans to submit images 
of themselves in the various poses to star in the panorama. 
By simply submitting a photo, they could be chosen to be 
Amarinn ^mder-Msn adventure? 


Dofl Y.R Yun. Senior 


developer 
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Location scouting, user-generated content, and moody 
visual cues all make the site jump off the screen 


Aaron Rollick: "The three main creative 
challenges of the experience were the 
panorama photo shoot* the composition 
of the final panorama, and the site 
interface design, 

'Once we decided on the general plot of 
the panorama adventure, we went through 
many rounds of sketches to determine 
every element we would need to 
communicate the story. All the details, from 
the characters' wardrobe to the buildings in 
the scene, were planned so we knew what 
elements we would have to shoot both on 
the street and in the studio. We 
collaborated with photographer. Dave Hill, 
to capture all the pieces with a Sony NEX 
camera - we loved his style and knew this 
kind of prefect was right up his alley 

'Few' the background we scouted areas 
around IMVC that fit the look and fee! we 
were going for. We wanted an urban 
environment that was a bit rough around 
the edges. Full streets as well as individual 
buildings and urban elements were 
captured to be composited into the final 
scene, All the characters and props were 
shot in Dave's studio, allowing us to rig 
actors for dramatic moments-in-time like a 
robber ftying off a bike. Each element was 
shot on white to make for easy extraction 
of the background. 


'Once we had all the elements, we began 
compositing the scene. Each piece was cut 
out and combined into the master 
composition. The result was a massively 
long panorama that visually read from left 
to right. Bringing together user-submitted 
poses, studio-shot elements, and 
on-iocatfon backgrounds was quite a 
challenge. The lighting and colour had to 
be ]ust right to make the scene believable. 

"The NEX camera did a great job of 
getting us the content we needed, making 
it possible to bring all the pieces to life. 

The site experience interface design was 
crucial to the success of the campaign.. 

Users needed to be able to easily 
contribute their photo to the panorama or 
the scene would be forever incomplete. The 
interface design centred on creating an 
exploratory experience, allowing users to 
easily upload their pose at any moment. 
While navigating the site was key to the 
experience, keeping if as minimal as 
possible put the spotlight on the panorama. 

Tt was important to marry the look and 
feel of the panorama with Lhe interface 
navigation, all the while staying as true as 
possible to The Amazing Spider-Man 
aesthetic. Dark, moody and suspenseful 
visual cues managed to bring everything 
together perfectly." 
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A lazy loading system and a custom 3D 
panorama engine ensured that the Sony 
experience was quick and efficient 

Dofl Yun and Francis Turmel: The Firstborn development team 
handled the backend duties entirely in-house. In order for us to 
get the aesthetic totally right, a custom 3D panorama engine was 
built to make the interactive panorama. It also allowed us to show 
the layers of the scene in making-of videos and media units. 

"A runtime asset coordinator was built to help the process of 
disposing objects into the 3D panorama world. By using this tool, 
designers could position each object exactly as they wanted it 
instead of relying on the development team to do it. Once the 
object was positioned. XML data - holding all of the information 
about each asset - was generated, In order to change or shift 
something, we simply had to replace the XML data with the 
necessary updates. 

"For each section, a lazy loading system was used to make the 
experience load swiftly and efficiently. The panorama scene had a 
5.000 pixeLwidth. so each object had to be loaded individually as 
it is displayed on the screen. This way, the experience didn't require 
all the assets to be loaded before a user enters.' 

# IP In order to get the aesthetic 
totally right, a custom 3D 
panorama engine was built i f 
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Plenty of props ^ 
were used to make 
sure the panorama 
had a cinematic; 
quality to it that 
,1 participants 
L c.Qu fd see 

themselves in. 


Kim Manley and Kristin Keefe: The team knew that 
posing and submitting a photo was a big ask, even with 
the final payoff of being in the Spider-Man panorama. In 
order to push it out to the masses we worked with Sony to 
stage multiple in-store events across toe country. 

‘Consumers could pose against a green screen and 
submit their photo with toe help of the Sony event staff. 
This in-store initiative, a&ong with a push across mustiple 
metfa channels, helped us to get the wo rd out to our 
target audience. 

"We created a custom video and interactive version of 
the panorama to be featured in YouTube's masthead, and 
optimised toe Ml experience for Facebook - our audience 


could upload a photo right there without having to "eawe 
the Facebook environment. A mobile site let users explore 
the panorama and watch behind-the-scenes video content 
featuring a filming of the panorama shoot and the 

compositing process. 


"We also had added extra incentives for the participants, 
like toe chance to wto a brand new Sony MEX camera. And 
of course, when users went ahead and submitted their 
photon social spring was key to get them to help spread 
the message." 
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Dark side of 
the sun 


Web Designer takes the short hop 
to Paris to talk to French web 
architects Soleil Noir. They reveal a 
love of Flash and coffee, and how 
they keep their creative integrity by 
not doing sales strategies 


wlui Soleil Noir wltal A creative assortment of designers, 
developers, producers, copywriters and motion and sound 
designers where 1 Rue du Mail 75002 Paris 
w«ta w w w.so leil noi r. n et 


/ 

oleil Noir was formed in 2000 
under the leadership of its two 
founders, who shared a common 
vision: to provide brands and 
their audiences with interactive, 
Immersive experiences. 

Experiences that tell stories, that 
bring unique moments to life for 
their users. 

For the past four years, Soleil 
Noir has been working with N espresso, an inspiring 
brand with which it has established a solid, trust- 
based ^tejtotiship. The more successful 
achlevemlffls are ^ clear sign of the relationship: they 
include VariafrortS 2010 and the cute Pixie, adapted 
for multiple supports (web, mobile and Apple's brand 
new ad format. iAd). 

In addition, Soleil Noir have been working with the 
LV'MH Group and more specifically Dior, for the past 
five years, as well as Disney Television, the Danone 
Group (Evian) and Samsung Electronics. 


Soleil Noir can diaim over Len years of experience in 
the industry. CEO and creative director Benjamin 
Laugel gives an insight into the story behind the 
agency. “It's a long and exciting story, of coursel Soleil 
Noir is a chemical reaction where the key ingredients 
are enthusiasm, hard work, and - as is the case in any 
kind of success story luck. It all started with a 
meeting, of course, but not just anywhere. It was on 
IRC, the forerunner of modern social networking 
systems. Gradually, during a lively discussion about a 
VCD encoding codec, we got our first website creation 
gig, which was given to us by a small music label. 
Hostile Records. 

It was a website that quickly grabbed people's 
attention due to the innovative choice of Flash and its 
media capacities At the time, it was a long shot, but 
we realised that it 'was a wise choice because we 
consequently worked with the entire EMI Group, 
coming up with such gems as Ben Harper's site, the 
site for the EMI record company a site for Snoop 
Dogg, and one for Placebo. 
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Soleil Noir timeline 

Established 2000 

Fo under s Benjamin Laugel, Olivier 


A mixer modulo for Roudoudou 
resulled in a panicky p:ione call from 
Virgi n's network ad mi n islrator. since 
he couldn't fathom how it could have 



The first production for 
Host i is Records was created 
using Flash 3 -ar Lists' 
sheets, clips, retransmission 
I of live cancerts. and chat. 


The Disney Channel's 
day- to-day broadcast site. 
Zapping Zone, 
incorporated a number 
of modules and games. 



Hostile Clan, Soleil 
Noir's first site to earn 
an FWA award, was a 
t remendous source of 
pride for the team. 



The fourth version of 
Soleil Noir's site 
surpassed resolution 
expectations held at 
the time. 


Soleir Noir completely 
revam ped t he game en gi ne for 
the first My st flash game, and 
created My st 4 More than 10 
million fans approved! 



The Proactive 


site was the 

first US brief 

■At 

j 

for Soleil Noir. 


and a success. 


#f An agency’s site is essential. It gives a 
first impression to a... client or someone 
who might wish to join the company if 1 


"These websites strengthened our enthusiasm for 
animation and for aesthetically pleasing stuff. Indeed, 
it's hard to offer half-arsed site to a legend or to a 
group that you admire." 

The agency uses a suitably sophisticated moniker. 
Laugel reveals how the name came about and how 
easy it was to get a matching domain. "The name 
Soleil Noir (meaning Black Sun) effectively reflects the 
mindset of the company back in the beginning; 
various points of view, shaping a shared ambition. We 
got into a lot of discussions, sometimes quite heated 
ones, but they always led to magical solutions. 


"Soleil Noir is an oxymoron that is a perfect 
description of these opposing natures, our 
personalities and our exchanges. 

The chance to use the mysterious and intriguing 
side of a name that was also being used for other 
digital structures at the time was also a compelling 
reason for us to choose the title. We wanted to set 
ourselves apart. 

“Next was the domain name. After we r d come up 
with a brand name, we were lucky enough to get it 
registered as a .com, .net and _fr. Back then, it was 
much more common to get an available domain 


name that reflected your original idea. This is no 
longer the case these days, and it’s getting harder and 
harder to avoid punctuation quirks that are rather 
pointless for the entry of a domain name. So you've 
got to have a lot of imagination." 

An agency’s web presence is the primary point of 
access. Laugel tells us how important it is to the 
company and reveals that a new version of the site is 
on its way. 'I almost feel like playing my trump card 
given that our site is no longer in any way up-to-date. 

"An agency's site Is essential. It gives a first 
impression to a potential client or to someone who 
might wish to join the company. 

“In my opinion, it needs to be rather neutral in order 
to showcase our creations and to describe, as 
effectively as possible, our know-how and all the work 
that’s been done. 

"Case studies are key components when we 
promote our projects and our values. It's a bit like 
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' r he lau nch oE t he K espresso 
Variations site won the 
company more than ten 
international awards - a 
flagship accompli shment. 


Soleil Naif'S 2012 
greeting card showcases 
every thing the brand, 
works for. loves, and 
believes in 


Experience 159 was 
SNTs first FWA site of 
l he motif hand Adobe 
Europe's winner for 
design in Milan. 


The idea for Samsung 
HighliEe was 
concealed on digital 
user experiences 
reflecting those in life. 


TheNespresso Citiz 
site was the start oEa 
fruitful collaboration 
between the brands 


Soleil Noir went 
mobile with the 
Dior iPhone app. 
The Dior world in 
your pocket. 


that Is stlU strong. 


Number of 
employees 



what happens in the ’behind-the-scenes' portrayals of 
films. We need to come up with things that are both 
interesting and inspiring. 

‘Were going to redo our website soon and pay as 
much attention as possible to the content that we're 
going to be creating in order to promote our work. So 
this is a 'project within a project', as we intend to come 
up with components solely designed to describe and 
showcase the actual project in question, 

‘We've also invested in social media and are proud 
of amassing a community of nearly 4.000fans on our 
Facebook page and nearly 6,000 followers on Twitter. 

'Our approach to communication is simple. We talk 
about our projects, about life at the office and about 
trends and other creations that matter to us. 

“It's this level of interest displayed by our fans in 
what was going on within and outside our offices that 
inspired us to create our greeting card, A playful year’ 
- vi m eo.co m/1846674Q 


Clients are an essential ingredient in the success of 
an agency. Lauge) stresses exactly how important 
they are and how Soleil Noir is now in a position to 
choose who they work with. ‘Clients are more than 
just the lifeblood of the agency. They're the ones with 
the power to make or break our passions, trigger our 
moods, make us laugh and cry and, in short, 
determine our emotions on a day-to-day basis* 

'At Soleil Noir, we don’t "do’ sales strategies. We get 
a lot of requests, and have the luxury of being able to 
choose with whom we wish to work. Regardless of the 
size of our projects, we always tackle them with the 
same amount of enthusiasm and Lhe same desire to 
come up with something original that inspires us. 

"Ultimately, the clients who want to work with us are 
frequently clients who share our qesires, who want to 
be daring and exceed certain limitations, yet always 
with the level of impeccable quality that has 
established the agency’s reputation." 



M What platform other 
than Flash would allow us 
to create real experiences... 
while making It possible 
for us to blend images, 
sound, video and 
interactivity easily? » 
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i I We have an organisational structure 
that remains constant and ultimately 
ensures a high-quality project §§ 


Soleil Noir has a well-established reputation which, 
as already mentioned, allows them to choose who 
they work with. Head of production Olivier Marchand 
defines which type of project they like to be involved 
with. “I often say that there are no bad brands just bad 
ways of handling them. It's not so much that we pick 
and choose the brands with which we work, but 
rattier we welcome clients with ambitions and ideas, 
and especially those who place their trust in us and 
give us a chance to wow them. 

“We have lots of projects, and the size of a project 
has never scared us. As proof of this, we've just come 
up with an entire digital business strategy for our 
client Nespresso. This namely involves the creation of 
mobile platforms (iOS, Android and mobile web), as 
well as a corporate transactional web platform for 50 
markets in 26 languages. Its not a question of size, but 
rather of know-how, imagination and the means of 
attaining a certain degree of perfection." 

Projects are - by their very nature - extremely 
different from each other. Marchand gives an insight 


into the lifecycle of a typical project. 'Each project is. 
by nature, distinct. As we act in accordance with each 
product, specific launch dates, the number of markets 
that should be considered and the concept in 
question, we really never operate according to a so- 
called typical timeline. 

'However, we have an organisational structure that 
remains constant and ultimately ensures a high- 
quality project. The processes, along with their tods, 
combined with creativity and perseverance, are a 
guarantee of success. 

“This involves the brainstorming stage, in which 
everyone, even the youngest Interns, may participate 
actively. It's a fact that, as far as digital technology Is 
concerned, and owing to the openness of this 
medium,anyone can have the right idea since all of us 
are navigating through that realm every single day. 
What follows is a question of culture, knowledge and 
the big picture. 

“The preparation stage Is crucial for the project. We 
spend a great deal of time coming up with the 


medianios, challenging the technical aspect and re 
examining what we've done. 

Then we follow what we might call a 'traditional 
cycle' that entails a seduction phase (the first layouts), 
organisation (timetables), industrialisation 
(wireframes) and finally we work to persuade the 
client of the merits of our solution (if this step is 
necessary, of course!}’ 

As with any project the creation tools are a matter 
of preference. Marchand explains that Soleil Noir has a 
special relationship with Adobe, but still needs to find 
the best solution. “We mostly use Adobe software 
because we’ve had a special partnership with Adobe 
for nearly five years now. 

'A certain amount of organisation is required for 
creative tasks, which is why our processes are also 
supported by software solutions lake Merlin, Axure. 
activeCollab and ConceptShare for reviewing layouts. 

“Were constantly striving to optimise our processes 
and thus to find the best possible software solutions 
for ourselves and for our clients.' 

The Flash platform is a key component in Soleil 
Noir projects. Marchand extols its benefits, but also 
adds a cautious note. "What other platform would 
allow us to create real experiences without having to 
worry about browser versions or platforms, while also 
making It possible for us to blend Images, sound, 
video and interactivity easily? 
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## We mustn’t put our eggs in one basket 
and focus on one software solution !IP S 


‘For more than 12 years. Flash has allowed us to 
breathe life into most of our projects. 

‘However - and we're very aware of this - we can't 
and mustn't put all our eggs in one basket and focus 
on only one software solution. Rather, we need to use 
the resources that allow us to accomplish our goals 
and fulfil the ambitions that we share with our clients." 

HTML5, CSSS and jQuery are seen as the 
technologies that will build the web over the coming 
years. Marchand gives an Insight into how certain 
technologies are going to coexist ‘AH technologies 
that allow us to make our ideas a reality are worthwhile! 

'HTMLs return to the forefront as a tool used to 
create digital experiences is a good thing, with the 
ultimate goal being the vision of a single navigation 
mode on all supports. What's currently being 
observed, though, suggests that this goal is 
unfortunately pretty far-off. The multiplicity of screens 
and certain proprietary restrictions, such as those 
found on Android or the iPhone, lead me to believe 
that this project is even less within reach at the 
present time. 

1 feel that, rather, we're going to witness a smart 
coexistence based on the projects themselves rather 
than submitting to an arbitrary selection of 
technologies. Flash's day In toe sun isn't over yet as 
long as Adobe permits it.' 

Social media has reached the point where it is an 
integral part of any digital campaign. Marchand 



WEB - . www.soMInolr.net 


FOUNDERS. _ Benjamin Laugel - CEO. 

Olivier Marchand CP 
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> Digital Strategy 
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> Web development 
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explains how important it is in contemporary projects. 
Trying to imagine a project without incorporating 
such tools is simply no longer possible. 

'These tods let us give users the chance to Interact 
and to embrace our platforms. 

'Whether this is achieved by personalising the 
experience via Facebook Connect or by merely 
sharing a message, this approach allows us to 
continue to bring a story to life and to go beyond its 
Initial context. Our greeting card 'believe in’ Is still 
being spread spontaneously, without prompting, 
seven months after its launch. 

'Websurfers have now taken control of brands, so 
it's up to us to write stories that inspire and entertain 
them, it's up to us to write stories that are increasingly 
innovative and fun. It's a real challenge!" 

The mobile revolution continues apace. Marchand 
offers his thoughts on how Important it Is. and even 
suggests that some services demonstrate we can live 
without websites. "Indeed, mobile has become a key 
factor for many experiences, as we're now able to 
access rich content easily. Gone are the days of 
newsletters that didn't accomplish much ot anything. 
Consumption of video and social games and photo¬ 
sharing has shaken up this model, and mobile has 


KEY PROJECT 


DHJANA - Nespresso 

-2011 

www.nespresso.com/dhjana 

Nespresso has launched Dhjana, its new 
award-winning limited edition 100 per cent blend, 
sourced from the Nespresso AAA Sustainable 
Quality™ programme, A blend composed of four 
origins (India, Costa Flea, Brazil, Colombia), 
discoverable by navigating through a unique tree. 

The technologies behind the site were Flash CSS 
for the frontendand Flash Builder 4 and PHP for the 
backend. Besides the somehow small structure (a 
few pages with one level of content each), Soleil 
Noir wanted to create a real forest ambience, so it 
used laigec-than-usuai Images to simulate this 
feelln g. To put this into context, if the website had 
no scrolling, it would need a 4,000 x 8,0Q0px 
resolution-approximately 16 displays at1.680 x 
1,050. This, added to the different layers of 
animations and contents, and localising the 
content in mote than 30 languages, required a hell 
of a lot of work to optimise the loading time and 
overal I performance. 


become a true passport to its own digital life. An 
experience without a mobile component Is now 
considered outdated, and services like Instagram and 
Path show that we can actually do without websites. 

“We currently advocate toe development of native 
applications for both Android and iOS platforms, while 
also providing a mobile web version of a site that’s 
available to everyone. 

For us, the user experience Is key. and this Is the 
best solution to ensure it. But ours Is a rapidly 
Changing world - we've got to adapt to these changes 
and stay attentive if we want to keep offering the best 
possible selection. 

"Responsive design and mobile first have become 
essential points to consider during the design phase. 
The related development time is. however, still too 
lengthy for the advertisers’ liking." 

Finally, the success of any agency is very much 
dictated by the people who work for it. Marchand 
offers some sound advice on the traits needed to 
succeed in the industry. “Be curious, be enthusiastic 
and really want something. Those are always the best 
pieces of advice that someone could offer. Without 
hard work, risk-taking and a sense of humbleness, 
nothing is possible. 

Questioning yourself, challenging your own ideas, 
and establishing and defending your choices are 
complicated, often painful tasks., but that's what we do 
on a daily basis, and this is clearly the only way to 
achieve a convincing result Work hard/play hard are 
the keys to success I' 
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Eric Meyer is considered by many as 
the go-to expert on CSS. Web Designer 
caught up with him to discover exactly 


what his thoughts are on the current 
state of CSS, and what the future holds 


feature 


C SS and Eric Meyer have gone hand-in-hand for 
over fifteen years. He is an internationally 
recognized expert on the subjects of HTML and 
CSS - what this man does not know about CSS is 
not worth knowing. Eric is an established author 
and has written a number of acclaimed books including 
the self-titled Eric Meyer on CSS, More Eric Meyer on 
CSS, and more recently he has added his expertise to 
the Smashing Book series with Smashing CSS, Beyond 
the written word, Eric is a prolific speaker and can be 
found headlining many a web conference. Eric Meyer is 
undoubtedly the king of CSS. Long may he reign. 

You've been at the forefront of the CSS revolution fora 
long time now. How do you rate the latest version of the 
specification and what do you think can be done fo push 
it forward? 

The stuff that's being worked on right now is really hard 
but really awesome - really powerful layout mechanisms, 
visual filters. useM but processor-heavy selectors, and so 
on. It really feels like we've solved, for the most pari most 
of the basically easy problems, like setting solid colours or 
having background images or defining borders. Even a lot 
of the medium-hard problems have been dealt with. Now 
were moving into the really rough territory, where it's an 
incredible challenge to create powerful, complex toofe that 
can still be described fend thus written) using simple 
syntax. Decisions of any sort can have huge tong-term 
consequences, so it's tricky to navigate. So I rate the latest 
worik very highly for ambition and potential. Forward 
progress may be a bit slower than we've seen lately, but 
there is need for caution. And, of course, any complex 
system is at least as hard to implement as it is to define, 
Browser teams are limited in terms of time and resources, 
so some things will be deferred, and that will be frustrating, 
Boar in mind what I've always said, though, "Never put 
down to malice what can be more adequately explained 
by resource constraints' 

Browser support Is a key factor behind the adoption of 
the latest CSS standards Vendor prefixes help widen 
support but why is it that alt browser vendors cannot 
agree on a standard code of support? 

They can. and often do. The devil is always in the details, 
and in the assumptions programmers make. For example 
the CSS specification currently says of box and text 
shadows: 

‘A non-zero blur distance indicates that the resulting 
shadow should be blurred, such as by a Gaussian filter. The 
exact algorithm is not defined.." 

Right there is an inconsistency waiting to happen. Yes. 
the spec goes on to give an approximate guide to how 
shadows should be biurred. but the algorithm is not 
precisely defined, so it's up to each browser team to devise 
their own algorithm. What are the odds they'll come up 
with precisely the same formula? You might think the 
answer is to define a precise algorithm, but what happens f 
later on a serious flaw Es found, or if a better algorithm is 
devised? CSS has long employed intentional ambiguity to 
allow browser makers to experiment and find the best 



K The only way to have consistent 
implementations is to have one browser ” 


ways to do things. There's also the problem of interaefon. 
CSS can define the behaviours of properties too. bar. and 
baz. and browsers can implement them all so that they 
consistently pass all their individual conformance tests, 
What happens when they’re used together, though? You 
could get wildly different results just based on slightly 
dfferent resolution code deep inside the various rendering 
engines say. if baz is handed before bar in one browser, 
and that order is switched «n another. And that's just with 
three properties interacting. How many properties did you 
have in your last style sheet? Basically, the only way to have 
perfectly consistent implementations is to have one 
browser, We had that once, when there was only World 
Wide Web. the browser Tim BemersLee wrote. But it was 
Mosaic that ignited the popular web r and Netscape that 
shot it into orbit Anyone who thinks browsers are hombly 
inconsistent now should look at ttiat period of history The 
divergence was extreme, bad enough that the same page 
would look wildly different across browsers, and it 
happened regularly. Madness! But now we know better. 

The introduction of high-resolution displays has 
brought a new challenge to designers and developers. 
Pixel ratio is the current solution, but do you think there 
is better answer? 

I honestly think that pixel-based images are about to 
become an endangered species. Anything that can be 
vectorised will be - and I remember seeing demonstrations 
in the Nineties of vector formats for photographs and the 
like. It would not surprise me in the slightest to see those 
ideas make a comeback. 

Web fonts have revolutionised web design, but how can 
the standard move forward and what eise does it have 
to offer? 

I'm not a typographer, so that's hard for me to say. I know 
that type enthusiasts are all stated about ideas like the 
ability to define ligature pairs and finer-grained control aver 
kerning and the like, but when they talk about that stuff I'm 
like your grandma listening to you talk about work - there's 
a lot of nodding in pauses for breath and me saying. 'That 
all sounds lovely, dear. Would you like another cup of tea?" 
I'm not trying to say that those things are irrelevant or 
useless. They arent! They're just in a realm that I don’t really 
grasp, I mean, I'm the guy whose results on 'which font is 
this. Anal or Helvetica?' quizzes are statistically 
irxlistinguisliable from random guesses, Which, let's be 
honest is what they are. 

Responsive design is a key component of the site- 
building process. However ,; currently it is in the early 
stages of its lifecycle. How do you see responsive design 
evolving in the short-term and long-term? 


It’s a great question, and one I think we’ll all have to answer 
together We’re still figuring out what works In what 
circumstances and finding out how old assumptions by 
browsers are clashing with the aims of responsive design 
- like, how browser pnefetching (which is meant to speed: 
up browsing) means an enormous increase in page weight 
when you're pointing to a tot of different media-specific 
style sheets. Responsive design is also pushing the edges 
of questions few of us thought about before; can the same 
content serve equally well in multiple media? Can the same 
page be useful cross-platform? I personally think the 
answer is, 'sometimes', but maybe I'm wrong. Maybe, as a 
result d responsive design, well find new and better ways 
of presenting content across all media. It has that potential. 

The CSS standard is a constant work in progress How 
long do you think it wilt be before CSS4 hits the web and 
what would you like to see in it? 

We can! really talk about a CSS4 because there are no 
monolithic CSS specs. The last d those was CSS21, and I 
doubt well see one again. Nov; we have dozens of CSS 
modules, each proceeding at its own pace. Take Selectors 
for an example; Level 3, what we might call CSS3 Selectors, 
is a full recommendation now. and Selectors Level 4 is well 
underway. In the meantime, a whole bunch d Level 3 
modules are wandering around in working draft phase. 
.Some of them could still be there when Selectors moves to 
Level 7. So now we have to talk in terms of the next period 
of time. I think aver the next year or so we’re going to see a 
ton of movement in the area of advanced layout, finally, 
with modules like GridLayout, FlexBox, Regions, and 
Exclusions. Those four together could create an enormous 
shift in the kinds of layouts we create as well as how we 
structure them. CSS Filters are very interesting, too, though 
I'm not sure how popular they are to implementers other 
than Adobe, and as I said before, Selectors continue to 
barrel ahead. I'm also hoping to see some advances in 
colours and backgrounds, but the priority right now is 
layout which is really where it belongs, We've needed this 
stuff since CSS was first written, 

Finally on a more personal level , are your goals the 
same as they were five years ago and what do you think 
you will be up to In five yeabs time? 

Broadly speaking, yes. they are, and l think they will be. My 
goals have always been to explain how to make websites 
with CSS by explaining how CSS works, and to thus help 
the whole community advance the web. It's sort d iike 
being a woodwork teacher who shows the class how to 
use all the tools safely and properly, so they can produce 
whatever masterpieces their hands and vision can bring 
forth, I could do that my whole life, I think, and thereby 
count myself luckier than most 
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E very designer and developer will have their 
own set of tools that sit with the must-have 
big guns. Here we present an essential 
selection of tools as chosen by a wealth of 
industry experts. There are tools for every 
element of the design process, from concept to 
completion. Imp rove your workflow, build rapid 
prototypes, unleash killer code, create graphical 
gorgeous ness, and test, test, test, All the big boys are 
included. Word Press, jGuery, Google, GitHub. Sass, 
plus a host of essentials But. as always the devil is in 
the detail and the experts have revealed a multitude 
of tools that will become constant companions. 

OPEN STREET MAP 

www.openstreetma acorn 

OpenStreetMap is a collaborative, open source 
alternative to the commercial mapping systems offered 
by Google and Bing. When used in collaboration with 
Open Layers, Open Street Map is capable of producing 
some very sophisticated mapping applications, and is 
often more up-to-date than its rivals due to the 
crowd-sourced nature of the cartography. 



GOOGLE ANALYTICS 

www, a nalytics.goo g le .co m 

Google Analytics is an easy-to-use yet powerful " 
reporting platform. It works by tracking visitors to 
your website through a tiny bit of JavaScript 
inserted into your page's HTML. The resulting 
data collected is presented through a series of 
interactive charts and reports that allow you to 
analyse metrics such as user-by-country, 
page-visits by age, or search terms by landing 
page. The ability to tie in with the Ad Words 
campaign system (paid-for text adverts that 
appear alongside organic search results on 
Google), analyse return on investment and visitor 
conversion ratios, as well as recent innovations 
such as in-page analytics and real-time data 
make this a superb package; all the more so as a 
result of its zero cost priceteg! 




ADOBE PROTO 

www. a dobe.com/protQ 

Design prototypes for your web project directly on your 
iPad or Android tablet creating different page elements 
with gestures- The output can be linked together to 
create a fully interactive prototype and sent to 
Dreamweaver with the basic wireframe code crested 
for you, once approved by the client. 



ADOBE DEBUT 

www.adobe.com/debut 

Adobe Debut is a presentation app for your tablet, 
created to allow designers to showcase their designs 
directly to the client in a polished, slick style. The app 
supports artwork from Illustrator, Photoshop and 
InDesign without the need to convert files ahead of 
time. Currently only available for Android devices. 
Adobe promise support for iOS is on the way. 



320 AND UP 

www. stu ft a nd non sense co.u k /project s/320a nd up 

The 320 and up responsive boilerplate is a tool that has 
been used by many designers to create a 'mobile first' 
site. The tool has changed as its creator Andy Clarke 
has modified to ensure that the latest version of the 320 
and up is better than ever, If you haven't tried, make 
sure that you do and soon. 



OpenWYSIWYG 



www.gpgnwe&wflrs.Hm 

An extremely easy to install rich text editor written 
entirely in JavaScript 


CKEtutor ^editor,cam 

A fully-featured and supported rich text editor with 
plug-in architecture 

BrowserStTOts www.browsershots.ora 

A simple way to view a preview of your site in 
many browsers simultaneously 

If This Then That OFTTT) ifttt.com 

Program simple actions in response to tweets. 
Instag ram photos and more! 

Maiichimp www.mailthimE.CQm 

Create, manage and measure email newsletter 
campaigns with ease 

SumoFaini www.sumopaint.com 

Web-based image editor with a bevy of features 
and functionality 

Sencha Touch 


w w w.sencha.com/prod ucts/touch 

Very flexible JavaScript framework for building 
HTML5 mobile web apps 

PhoneGap wmphpngqaPiCpm 

Use web technologies to develop and create native 
apps across seven platforms 

Magento ym w.magaitocftmmer 

A fully-featured and very capable open-source 
eCommerce platform 

QpenCart www.opencart.com 

Free, easy to install and feature-rich open-source 
eCommerce platform 

Generate dummy placeholder text for your 
projects quickly and simply 

WoliramAlpha API 

erg^w s ti.wgjf ram alcha» wm/g i?i 

Connect with and integrate scientific charts, 
projections and data analysis 

OpenID openid.net 

Single authentication framework for use across 
multiple websites including social media 

Ruby on Ralls rubvonrails.ora 

Useful PHP framework for rapid development of 

applications with common functionality 

Less Framework lessframework.com 

CSS grid system designed to work across multiple 

devices responsively 

MediaCore madiatflifcfiam 

Impressively capable Python-based video and 

multi-media Content Management System (CMS) 

imageAipha wmflnyminiiwm 

A very handy tool with which you can reduce 

24-bit PNG file sizes 


CSS3 Button Maker 

^wffiC55tricK5,tgm/aymple5/ButLpnMaKsr 

Chris Coyier's tool for creating image-less buttons 
with pure CSS3 

Procssor 

A web-based service for reformatting your CSS 
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github 

O SOCIAL CODING 


GITHUB 


wwwaithub.com 

GitHub is the 


immense ty-popular 


hosting and code sharing service, currently used bv 
more than a million people. GitHub hosts software 
development projects that use the Git revision 
control system. The power of GitHub comes from its 
collaborative tools and capabilities. It not only offers 
a place to share and fork code repositories, but also 
Integrates wikis, issue tracking, arid code review. 
GitHub has become the Industry standard for 
making code projects public and getting feedback 
from potentially thousands of developers all around 
the world. 



FONT SQUIRRELS ©FONT-FACE GENERATOR 

www ton tsqu I rr el.com/fmtf ace/qe nerator 

For a long time, using custom fonts on web pages has 
been a big challenge for web designers. Font Squirrel's 
@font-face generator is a big help in this regard. After 
you've chosen a font with appropriate licensing, it will 
give you the necessary cross-browser CSS. 



GOOGLE WEB FONTS 

www.gooqle.corn/webfonts 

Googles new font repository is an easy way to add 
custom fonts that are free for commercial use. and can 
be embedded using a single line of code. Download 
from a selection of hundreds of fonts in different styles 
and scripts. 




wTirthtciiQiicniWlid. 


CfiHrrpv wUii'di ffiatar IMtht Dm* IW IlM *vU QuMt i/d JjkL 
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CONDITIONAL CLASSES 

w w w.pa u 11 rish ,co m/2QQS/conditl o nal-stylesh eets-vs 

css hacks an 5 wer-nei th er 

Extra HTTP requests are bad for page speed. So instead 
of targeting old versions of IE with separate stylesheets 
(which are also harder to maintain), use Paul Irish's 
conditional classes method instead. It's dean. easy, and 
it validates! 







STACK OVERFLOW 

f—| stackoverfiaw w ww.stackoverfIow.com 

It's tough to avoid Stack 

Overflow when Googling for solutions to coding 
problems. It's a fantastic community that's invaluable for 
collaborative problem solving. It should be one of your 
go-to resources for getting your questions answered by 
knowledgeable developers. 



GOOGLE READER 

ww w.g Qog le.com/reader/ 

Print resources are great for 
getting concepts in your 

Reader ha3d ■ no1:hi n s 11 ke 

J onl in e sources for keeping 
up with trends, coding tricks, 
and more. Google Reader (or any RSS reader) will help 
you stay up-to-the-minute on hundreds of feeds, for a 
nice complement to offline reading. 



Goatfk MM m wk * *•- i 



YEPNOPE.JS 

vepnopeis.com 

While Modernizr can help you detect features, yepnope 
lets you asynchronously load different scripts based on 
your feature detection results. This works great for 
avoiding loading poly fills unnecessarily, helping your 
pages load more efficiently, 

yepnope.*. 


SASS/COMPASS 

w ww-S ass- la nq .cam 
www.compass-stvle.org 

If you haven't started 
preprocessing your CSS, 
then get on it! The 
com bi nation of Sass and 
Compass brings real programming techniques to 
stylesheets, making your CSS much easier to code 
and maintain. Sass extends CSS by adding nested 
rules, variables, mixins, and much more. Compass 
helps you avoid unnecessary repetition *n your CSS 
by providing reusable patterns for CSS3 vendor 







































































CODEKIT 

ww w.incidentBZcpmfcqd ekit 

CodeKit is gaining traction as one of the hottest apps. It 
helps you process files using a number of different 
time-saving tools - Less. Sass. Stylus. Ham!, Coffee Script. 
Compass, and more. But it does so much more than 
that. And best of all? No command-line abilities required. 


WHEN CAN I USE... 

wwwxaniuse.com 

This is a great online resource for finding browser 
support information on virtually anything. It's kept up to 
date and includes info on new CSS3 stuff. HTMIL5 APIs, 
and other miscellaneous DOM features. It's even great 
for browsing just to find out what's new. 



E 


JSFIDDLE 


JSFIDDLE 

www, | sfiddle.net 


Every developer needs a place to experiment with, debug, 
and share code publicly, without all the overhead of 
something like GitHub.|sFiddle has tons of great features. 


and a nice, dtean. usable interface. 


compass* 

oref xed code, CSS typography, and mere A It ny ugh 
tic sc too s a'c command - ire based, desigrers who 
aren't quite so familiar with the coir mend-I he car 
use one of the available GUI apes (for both Mac and 
Windows) that automates these tasks fo-you. So tne 
only real learning curve is related to learning the 
syntax, which has quite a few differences from 
traditional CSS. 


compass 

n an CSS Aatf*of>n$ 

Frmneimortt 




PSEUDO-ELEMENTS 

w w w.n ico lasq aliaq her com/an -in trodu c tion-to-css- 

pseu do-e I erne nt- hack s 

Pseudo-elements, recently promoted by a number of 
developer bloggers, are a CSS feature that can do so 
much with so little code. They're useful for decorative, 
non-essential content, and the numbs - of things possible 
with them is only limited by your ability to innovate. 



JSLint 


JSLINT 

www.islint.com 

JSLmt is Douglas 
Crockford's code-quality checking tool for JavaScript. 
You might not agree with all of JSLinfs strict 
recommendations, but this is an essential tool for 
JavaScript developers who want code that’s up to 
standards and easy to maantain and debug. 
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YUI Library YYVYVY.Yyjlitir^rY^Bm 

Yabool's open-source JavaScript and 
CSS Framework 

Nomialize.css 

Nicolas- Gallagher's modern. HTMLS-readv 
alternative to CSS resets 

YSIowwww.develPPer.vahoo.com/vslQW 

A browser add-on that analyses webpages for 

speed improvements 

HTML5 Cross Browser Polyfills 

w w w.a i Ih u b. eom/M odern 'art Modern iz r/wiki 

A huge list of polyfills for tonnes of brand spanking 

new web technologies 

W3C CSS Validatior Service 

.iigsaw.w3.prfl/cs5-validator 

The WSC's tool for checking for invalid CSS 

HTML5 Please www. html 5 a lease ,co m 

Helps you to use the new HTML5 and CSS3 

features responsibly 

Isobar’s Front-End Coding Standards 
LiaJsobarxQriy^Uudiirds 

Pillars of front-end development are outlined in this 
extremely useful guide 

wave w w Lr-aim 

A web accessibility evaluation tool from WebAlM 

Jonathan Snook's great guide to scalable and 
modular CSS 

Wufoos Current State of HTML5 Forms 

www.wufoo.com/html5 

A detailed guide for support of new HTMlS form 
features 

StatCounter Global Stats 

oa.statCQunter.cQm 

Worldwide, up-to-date browser and OS stats and 
trend charts 

jQuery Boilerplate 
w w w. i qli sr yI?q i I&rp I a le.com 

A jump-start for your jQuery plugin 
development 

OperiCrypt IP Geo -Location API 
w w w.opencr ypt.com/iD-lQcati on .php 

Get your visitor's location in the world from their IP 
address 

Flowplaver fiowalaveroro 

An easy-to-implement media player to show 
self-hosted video 

TinyMGE ynvmi:£.inQAiacode.£oni 

Rich Text Editor with extensible platform for 
additional plug-in functionality 

Subtle Patterns sutniepatterns.com 

A gallery of free elegant background patterns 
Reponsivepx www.resDQnsivepx.com 

An easy-as-pie way to test where your responsive 
design breakpoints are 

Espresso 

m a orabb i t.com/esp ressja 

The powerful Mac-based text editor with 
CSS3 support. 
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ADOBE SHADOW 

wwwadobecomyshadow 

Adobe Shadow makes t easy to prototype and 
test, on your mobile devices while building on 
your desktop computer. The concept is very 
simple - press a button on your computer and 
your devices will automatically navigate to and 
load the page you're working on. providing 
hands-free access to a real-life view of how your 
work renders on each device. 

As well as making it simple to automatically 
navigate your device to the page you’re currently 
working on. Shadow allows you to remotely 
inspect and debug individual devices, making it 
easier to track down and fix bugs than by 
traditional methods. This is an example of the 
work coming out of the Adobe Labs playground, 
and offers a genuinely useful solution to an 
increasingly common problem - designing for 
mobile devices. 



oocss 

www.qithubxorn/stubbornella/oocss/wiki 

Object-oriented CSS is a CSS coding technique 
popularized by Nicoie Sullivan. Even if you don't agree 
with all the principles and suggestions of OOCSS. you 
should definitely understand the concepts. It's sure to 
make your code cleaner, faster, and easier to maintain. 


fcj BACKBONE.JS MONEJS 

^ -*— www.backboneis.ora 

Backbone.is is a web app framework that helps you 
structure your JavaScript using the well-known 
Model-View-Contrdler CM VO pattern. If you want better 
structure and maintainability in complex apps. it's well 
worth looking into the power of Backbone. 



TWITTER BOOTSTRAP 

www.t witle r.g ithu bxom/boot stra p 

Bootstrap is a starting framework for web sites and 
webapps that includes ready-to-use HTML. CSS. and 
JavaScript-based modules for common Ul components 
and interactions. Bootstrap helps you avoid ran venting 
the wheel, and lets you focus on innovation. 



^ BACKBONE.JS 

*r _ 


—-■ - - 

1 r- 



ADOBE BROWSERLAB 

browse r la h.ad a be.coin 

BrowserLab is an easy way to get static screenshots of 
your web projects as they appear in various browsers 
on different platforms. It's not a full-function way of 
testing your interfaces, but it's definitely an option for 
getting a peek at browser versions you don’t have 
immediate access to, 



THE EXPERTS CHOICE 




BIN FRAIN 
Freelance front- end 
developer 
Sass and Compass 

iYiv^ l irv l y l L i- i 'ifi r if? u&n tv'i'ViY romaM item 

It's hard to imagine writing vanilla CSS once 
you've got to grips with Sass and Compass. 

Sublime Text 2 

nute amply the best all-round text editor 
available. Cross-platform, infinitely extensible 
and incredibly fast, 

Adobe Shadow 

wwiAdabsaahte 

Check your design/build across multiple 
devices without having to dck refresh 
on each. 



iV JONATHAN MITCHELL 
if pup Developer at Adeo 


Iti 1 

^ vfMv.aetfrebua.cof7} 

nlbbler 

nessus 


t? 


ALAR A MILLS 
Product designer 
HTML5 Elements Table 
Poster wvM.A!3faMiif££Qtrt 
W3C- Markup Validation Service 

W3C - CSS Validation Service 


Pam Turner 
Sr Web Designer at Adeo 
Notepad++ 

www nfitpnad-nliJS-nfiis.&rQ 

Google Chrome 

yvwwffttftte mm/rhmrr^ 

Twitter Bootstrap 
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BEN TRUYMAN 
TecbLead at Critical Mass 
Adobe Shadow 

witmtidchfLCGn-ifthudcvs 

ResponseJS 

wvw/.rtiSDonseis.com 

Font Awesome ferfermmfigtfMmy 


v 


BRANDONRJONES 
Web designer 

CSS Hat 

wtow.csstetcom 

l Subtle Patterns 

\ YmMMtMimtm 

; Foundation 3 




CHRIS MILLS 


Opera Dragonfly 
mmsKi^cDEnldmnnn^ 
: The Opera Mobile Emulator 
\ v^.oDera.com/tievebD&/tcc}^mobite 

\ Social networking 

i ym/Mterton} 














































































CSS HAT 

www.csshat.com 

It you're still designing your layouts almost completely 
in Photoshop, and you're using C553 heavily, then CSS 
Hat is a must-try tool. Simply put, this Photoshop add-on 
will convert your Photoshop layer styles to CSSS that 
you can drop right into your text editor. 



Why they love CSS Hit? 


MODERNIZR 

w w w.mod ern i zr.tom 
Dealing with cross-browser 
been an ongoing battle tor developers since the 
days of the Netscape-IE browser wars. Modemizr 
makes these inconsistencies elegant to work with. 
This open-source JavaScript library dynamically 
adds helper classes to a document's <htm!> 
element, so you can have separate CSS rule sets 
for non-JavaScript users or users whose browsers 
don't support many new CSS3 features. But 
primarily. Modernizr helps you to easily detect 
support for new web technologies, including 
CSSS. HTML5, and miscellaneous DOM features, 
and then deal with the results (either support or 
non-support) accordingly. 







omit m mm m 



CSS3 MEDIA QUERIES ^ 

www.w3.org /TR/css3-med1aau eries 

Media Queries are at the heart ol what e 
known as the responsive web design movement 
Media Queries let you apply different styles to a web 
page depending on a number of factors. Primarily 
developers are using Media Queries to target 
different devices based on browser width. You can 
also target device width, orientation, aspect ratio, 
and more. Media Queries can even be combined 
with CSS3 transitions for some cool effects that take 
place when elements on the page when the 
browser window is resized or a device's orientation 
is changed, Media Queries are a big step forward in 
helping developers create a one-size-fits all 
experience, without the need for a separate 
mobile website. 



PREFIXH 

www.prefixr.com 

Prefixr is a great time-saving app that gives you 
cross-browser CS53 in just one click. With this online 
tool (winch has an API that integrates into many popular 
text editors), you can develop your code using a single 
vendor prefix and then automatically add the remaining 
code for other browsers. 


net tuts* 

Prefixr 


LIUERELOAO 

w w w.li ve re I oad .com 

LiveR&load makes your browser's refresh button 
obsolete. Instead of making changes, then hitting F5, 
UveReload monitors changes in the file system and 
then it will automatically make the changes live in the 
browser without a refresh. It will even compile 
CofteeScript, Sass, Ha ml. and more. 
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Code Igniter «tisiqnHgr.t9[Ti 

PHP-based open-source web application 

framework. Both flexible and powerful 

Sumpter si impler.cQ m 

Boilerplate code and files to kick-start your web 

project without unnecessary fluff 

Open Exchange Hates 

QDeiiexchanaerates.org/documeiTtation 

Free API far getting exchange rates 

programmatically over the web 

FlickrAPIwwwilickr.com 

Grab and manipulate Flickr images using its API 

service directly from your code, 

Transmit mw.Eanit.Km/trfln&mit 

Great FTP application for Mac computers from the 

makers of Coda and Diet Coda 


Open Layers www.QpenJayers.Qfy 

Build custom maps with personalised overlays 
using various different providers 
ColorHunter www.cotorhunter.com 

Upload a photo to get an instant colour scheme 
defined for you! 


Skitch www.skitch.com 
A useful screengrab tool that allows you to 
annotate grabs with text and marks 

Gridless Ihfl ICQQI OtJ V.fl I lh Ub.CQITl/ 

gridless Ittilerfllate 

HTWL5 and C5S3 boilerplate system aimed at a 
mobile-first approach 

Page Speed Online 

de ve looers. aooa I e.com/paa espee d 

Get useful hints and taps to increase the page load 
speeds on your site 


FontStmct foinlstrucf.com 

Create your own typefaces using this online editor 
and creation tool 

HootSuite hoot suite, earn 

Monitor and react to your social network feeds 
using a single interface 

Create interactive typography easily with this 
useful JavaScript plug-in 

Mobilized mobl ize i 5.CQ m 

Make existing sites more mobile orientated with 
this framework 

stock.schng sxcJm 

Free stock photography, some without limitation 
- ideal for web designers 

Prezi arezi.com 

Create and deploy powerpo«nt-style presentations 
online with this interactive tool 

Stitches draptun ,g ifhuti com /stitahe h 

Generate CSS Sprite sheets by uploading your 
existing images and copying the output 

Cage cafleaafl.cam 

Useful online tool for collaborating with other 
designers and developers 

PDF.isgithub.com/mozilla/pdf.i5 

Render PDF files directly as native HTML with this 
JavaScript plug-in! 
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W3C MARKUP VAUDA1I0N SERVICE 

validator w3.org 

The W3C’s validator should be part of every developer's 
workflow. It’s not going to make your code perfect but 
it will help you track down errors and will help you 
better understand what kind of HTML is now 
considered best practice, and which elements have 
been removed from the spec. 



TYPEKIT 

www.typekit.com 

Typekit makes it easy to use a full library of fonts on 
the web for the first time. Rather than limiting you to 
commonly installed fonts. TypeKit uses a 
downloadable format ttiat allows fonts to be 
temporarily installed in the browser. This allows font 
foundries to license their fonts without the risk of 
them being pirated, and opens up a world of 
typographic possibilities for web designers. 



IMPRESS 

www.WQrdpress.com 

WordPress is arguably the 
definitive blogging platform 
on the web. It powers millions 
of websites with its highly 


extensible platform, and has developed sufficiently 


to become a capable general-purpose Content 


Management System (CMS), such that it is easily the 



most popular CMS currently available. One of the 
key elements to the success of WordPress as a 
platform has been the license under which it's 
distributed - this allows the software to be freely 
used and adapted to suit each individual designer or 
developer's needs. As well as this generous licence, 
the extensible nature of the core system makes it 
easy to write plug-ins that work with the core, which 
has led to a hugely diverse and active ecosystem of 
supporting extensions covering functionality as 
disparate as ^Commerce shops to video galleries, 


CHROME DEVELOPER TOOLS 

d evelopers.q oon le.com/ch rom e-d evel ooer- tools/ 

docs/overview 

Chrome's developer tools add-on comes bundled with 
the Chrome browser, and is essentially the Chrome 
equivalent to Firefox's Firebug and its developer tools 
add-on. You'll be continuously testing sites in Chrome, 
so its console, profiling, live CSS editing, DOM and 
resource checking tools are invaluable to your 


HOTGLOO 

www.hotqlQQ.com 

HotGloo is an easy-to-use prototyping and 
wireframing system that's entirely web based. It 
supports collaboration, allowing multiple users to 
work together to create interactive projects. 
Fully-featured tools allow for master pages as well as 
standard Ul elements, and the system makes it 
simple to collect feedback for iterative improvements. 


TWITTER API 

dev-twltter.com 

The Twitter API provides easy access to real-time and 
limited historical data based on users, hashtagsor pure 
search terms. The API can be accessed In a variety of 
ways to suit your project requirements, whether you're 
grabbing results via JavaScript or a server-side 
language, including JSON and XML. 



Extend your reach. 
Multiply your audience. 



FACEBOOK API 

d evel one rs facebook. com 

Facebook provides an API platform that allows for 
integration with the social media platform across 
websites, mobile apps and the Facebook website itself. 
If includes sut>APls such as OpenGraph and makes it 
simple to deploy engaging social experiences into your 
app or website without having to create all the 
plumbing from scratch. 
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MOOTOOLS 

www. mootools.n et 

A popular alternative to iQuery, MooTools offers a 
framework for achieving common tasks such as 
grabbing a DOM node and assigning a CSS class. As 
with jQuery. the system is extensible and there is a rich 
ecosystem of piug-insand extensions available. While 
not as well-known now as jQuery MooToote uses a 
similar approach and is still very useful for rapid 
JavaScript development. 



IflOITtr 


mooratifr 



ADOBE KULER 

kuler.adobe.com 

Adobe Kuler is an online colour scheming tool that uses 
mathematical equations to provide a range of palettes 
based on a core anchor colour. Features include photo 
upload to automatically create a complementary colour 
scheme, the ability to download swatch files, and store 
favourite schemes for later retrieval. 



DREAMWEAVER 

www. a dob e.com/d rea m weave r 

Dreamweaver is the de facto web design tool, and while 
historically expensive is now far more accessible as a 
result of the Adobe Creative Cloud. The latest version 
offers enhanced WebKit-powered live view, live code 
and a host of integrated services including syntax 
support for jQuery PHR ASP.NET and more. 





THE EXPERTS CHOICE 



CURES SEES 
MD at Square Circle 
Media 

X-Frecise ls3.envsto. 


r; 

BmwserStaek wwwtifCM&erstack.cam 


Layer Cake YflmmiWtltliLmtrf 



ELIZABETH 

ROBSON 

Author ol Wickedly 
Smart 


Hype vavivI i irni j f mrn/nvry! \ 

DietCoda mnirmrri 
Adobe Shadow 



JEFFREY WAY 
Editor at Netfeits* 

Prefix r 

v,ww.nreftxr.com 


L aravel ferave/mm 



DAVID MAY 
Chief creative at 
Wijmo 

Theme Roller 


kiu&MiLQpm/lhemeEnRei 

UXPIN&UXPin notepads 

ColorSchemer Touch 


MlaicheiTierfflirfeuch infaohp 



HAMPTON CATLIN 
Inventor of Sass 
Link Conditioner 

rmttasivn^. 


I irbkan 

\ Bourbon tf/gt iQtlttiQLWktlQU&Vn 
\ Spracker 9. rr / 


j snrseker 


W 


ERIC MEYER 

CSSBepert 

BBEdit 


Browser/Inspector Combo 

various 


I Moqups moaups.com 

* Online tool for generating advanced 
; markups before building a website 

I TheResponsinator 

\ www.resDQnainatQr.CQm 

| VI ew websites i n a host of resol uti ons for 
l sma rtphones and tablets 

] Mustacbe.is git hu b .com /\ Fin I/m us lache. js 

| Less work with these logic-less templates for a host 
| of coding languages 

I WPtouch Pro 

; www.bravenewcpde.com/Droduct/wDtouch-Dro 

j WordPress plug-in that instantly adds a mobile 
i version qf site 

j Fatternizer pgKsmfcf r.WITl 

\ An online CSS3 stripe generator tool 

| KttidoUIwww.KenclQm.com 

| A framework to help build HTML5 apps 

| Coffescript coffeescript.Qro 
| Lightweight is nguage that com pi les i nto JavsSerlpt 

| Codesniffer pear.phD.net/Dackaae/PHP 
j CodeSniffer 

I This tool checks PHP code to a defined standard 

! MoodboardLite 

! ityne5.aDBls l QgfTi/y&/flDP/niQQtlt?Qflrd-litfi/ 

] id3637&6813?rm=S 

i iPad app for creating mood and inspiration boards 

| codosauriisiLun&j, fc ajj l QL£,Qjj,mi!ya/ajj,p/ 

j cQdPSfl urn s/id3S25Q Qg3£?mt=S 

| FTP Client which allows you to edit your code 
| directly on the server 

i The popular Mac-based text editor from Panic 
j Divw w w w.rn I zaa e. com/d i v v v 
| A screen workspace management tool 
j Fitvids www.rittfid 5 l 5 .cpm 

I A jQuery piug-in for fluid-width embedded videos 

j HTML-IpsttmwY/W.html'iPSlimiMni 

! Quick and easy Lorem Ipsum placeholder text n 
| various HTML contexts 



| Sublime Text 2 WWW. 5 Ut?limfite^UQfT 1 

! The feature-rich text editor for web app developers 

\ Markdown 

| darinqtireball.net/proiects/markdowri 
: Automatical ly expand marked-up text to ful I HTM L 
I using markdown 

1 Video.js 
i www.videQjs.ccnh 

1 Video player with the same API for HTMI.5 and Flash 

! AnythingSlider 

I yyyy Wrtts-l r i win/gwarn p I gs/TSn y Ih in 1 f 

I A multi-purpose content slider jQuery plug-in 

I BuySellAds 


www.buvsellads.CQm 

An ad network that's popular among web designers 

Notepads www.noteQad-QJus-Plus.org 


The popular and powerful text editor 

1 SpritePad 

\ Drag-and-drop interface for creating CSS sprites 
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200 ESSENTIAL TOOLS AND TRENDS ► 


IS Bin i5bin.com 

A live-rendered code sharing and testing tool, 
recently updated. 

IS Hotline java script, poc kettiotli ne.CQtri 

A completely free telephone hotline to help struggling 
JavaScript developers 

Zen Coding 

CQde.gQoa I e. com/p/zen-codin a 

A plug-in for text editors for high-speed coding. 

Gtt a it-scm.com 

A free distributed version control system for projects 

DocHub rioehub_io/ 

Instant access to documentation for CSS, HTML, 
JavaScript and more 

HTML5 - Edition for Weh Developers 
developers,whatwfl.org 

The HTML5 spec, rewritten specifically for developers 

CSS3 Generator cssJaene rate r,corn 

A toot that generates code for tonnes of CSS3 features 

Animate.css daneden.me/anlmate 

A library of ready-Lo-use CSSS animations 

MicroismicrQis.com/ 

Search engine that works for single-purpose 
JavaScript frameworks 

CSS3 Click Chart c5s3tliMarl,tQfn 

Code, links, and examples for loads of C5S3 features 


: 

I 

: 

i 

i 

: 

j 

I 

| 

: 

: 

j 

: 

i 

: 

: 

: 


: 

: 

i 

: 

j 

: 


CodePeri todeoen.lo 

A code sharing tool with extensive library and I 

preprocessor support [ 

Video SWS prapgn^n^.dfi/htmlfivldfio 

A feature comparison of about two dozen HTML5 [ 

video players i 

Skeleton www.aetskeleton.com j 


A boilerplate for responsive, mobile-friendly 
development of sites 

Responsive Images Chart bit.lv/DMiKCv 

A chart with feature breakdown for many responsive 
image solutions 

LABjs iabjs.CQm 

Script loader to enhance page performance and 
reduce resource blocking 

RequireJS reouireis.om 

Script and module loader designed to improve speed 
and code 

jQuery Mobile iauervmobile.com 

Touch-optimised web framework 

Aiaxload w w w.a ia xJoad. info 

A tool for generating Ajax loading animated GIFs 

Web Developer Toolbar 
w w wxhr isued erick. com/ work/webdeveloper 

The popular developer tools for Firefox and Chrome 

Parallax.is 

sto I h 5d&rf >fl1lh u&.t gm/Para Wms 

A JavaScriptframework for creating parallax scrolling 

Google Webmaster Tools 
w w w.g oogle.com/web masters/too Is 

Webmaster tools for optimising websites for search 

Lay® Styles www.laverslvles.org 

A Photoshop-like layer styles interface that produces 
CSS code 
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| HTML 5 ★ BlllLEHPUITlH 

HTML5 BOILERPLATE 

www.htrtil5bQilerplate.CQrn 

HTML5 boilerplate provides a basic structural framework into which an HTML5 website or webaop can be deployed, 

The system is set up to be compatible with all major browsers, including older versions of Internet Explorer, while still 
allowing use of the modem HTML5 tags such as <artide> <aside> and <header>, The system also features mobile 
device optimisation, allowing for rapid deployment across different platforms including the modern breed of 
smartphones and tablets. 

Other useful features include deliberate support for progressive enhancement limited cross-dependencies 
(allowing you to remove whole sections of code without worrying about breaking other parts of Lhe system) and it 
even provides a boilerplate .htaccess file to set up best-practice gripping and caching on your server 


BASECAMP 

w w w.baseca mp.cQm 

Basecamp is an online project management system that 
allows you to collaborate with colleagues, assign tasks 
and track progress with ease. The system provides to-do 
lists, discussion areas, an asset repository and shared 
calendar. Part of a suite of applications offered by 
375*gnals including Highrise, Backpack and Campfire, 
which together provide a complete suite of 
management tools. 


© 




More pwpte In more places manege 
more projects on the web today with 
Baseeamp than any other app. 


gf* Last week 14*432 companies kicked 
off new projects using Basecemp, 
Today (ft your turn. 


Find Otft i^Y Of 5|*nvOurnf»t pmjft far 


EVERNOTE 

www.evernote com 

Evernote allows you to create a virtual scrapbook of 
webpages, photos, text and audio that you come across 
while browsing and access them on any of your devices 
including your desktop computers, phone and tablet. 
The database allows you to create keywords and tags to 
quickly categorise and search for items in your 
notebook, and even uses OCR to digitise text in photos 
and images. 

DROPBOX 

w w w-d ropbQx.com 

Dropbox is a free service that allows you to store files on 
the web (in the cloud) and automatically synchronise 
them between your different computers and devices. It 
works on Android, iPhone and iPad, as well as your 
desktop computer, and supports collaboration through 
sharing of folders with your contacts. 


WETRANSFEF 

w ww.wetransfer.com 

WeTransfer is one of a host of free services that allow 
you to easily send a file that's too big for regular email 
What makes this particular service stand ouL is the 
excellent 2G6 file limit, and the ability to send multiple 
files simultaneously without having to register for an 
account, making it an ideal way to get your larger files 
around the web. 



HECAPTCHA 

www.recaptcha.net 

reCaptcha is a free service that helps prevent spam by 
presenting a pair of words scanned from books, 
newspapers and radio show scripts that are being 
digitised. The system works by matching known words 
with unknown words, allowing users to prove they're not 
spam bots, and the Google-sponsored digitising project 
to get free translation at the same time. 
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Why w* Cu*PUP 


CAKEPHP 

www.cakephp.Qrg 

Prototype PHP-based web applications rapidly using 
boilerplate code and scaffolding. CakePHP is MIT 
licenced, and comes with a lot of the common plumbing 
already taken care of including authentication, database 
access, caching and security. CakePHP has a loyal 
following so support is good too. 


Bill* API 

dev.bitlvxQm 

The bit.lv API allows to you programmatically create 
shortened links in the same way that twitter does when 
you paste a link into its website. You can also track and 
monitor usage with some analytics support. It's a pretty 
simple service, but incredibly useful in the modern era 
of character-limited social media communication. 


ADOBE AIR 

www.adQbe.CQim/air 

Adobe AIR allows you to deploy native applications 
across different operating systems while using standard 
web development tools such as HTML. CSS, JavaScript 
and Plash. Apps can be compiled into the AIR format, 
which is then installed directly to the host operating 
system via the web, making it ideal for developing 
desktop widgets. 


JQUERY 

^ jUU6/r jqusry.com 

*** jQuery arrived at the 
same time as the explosion in front-end client-side 
rich user interface development, and helped to 
herald the arrival of HTML5 into everyday 
conversation as a result of its ubiquity. Before 
jQuery creating cross-browser user interactions 
was tricky to adiieve and often extremely 
time-consuming. jQuery solved this by abstracting 
the browser differences through a series of 
common methods, allowing developers and 
designers to spend time worrying about how to 
provide the best user experience rather than 
worrying about the nuts and bolts of supporting 
different DOM models and JavaScript engines. It 
also brought the idea of chaining commands 
together to the masses, making for dramatically 
more succinct code! 

Today. jQuery con be found on more websites 
than any other JavaScript library, and it has an 
almost unlimited number of tutorials, plug-ins and 
extensions available to further enhance the core 
functionality. 


EXPERT QUICK-PICKS 


Mobile Design Pattern Gallery 


ONDREJ SKACEL 

Interactive developer, Str iker Digital 
PSPadwww.csoad.com 

Lightweight-but-powerful text editor with handy 
features including FTP client, code highlighting. Lorem 
Ipsum generator, predefined HTML and much more. 

Window Resizer 

hchrQme.qQQqle.CQiTi/webatQre/detail/ 

If kplliraakff an hi nideamm mi I r gpf onf h? 

utm source-chrome-iito-icon 

Window Resizer is a Google Chrome plug-in that 
allows you to comfortably test your website In various 
predefined or your custom resolutions. 

gsap yyyy w.flresn 12 

Greensock brings the ease of animation from Flash to 
HTML. Animating DOM has never been easier. 

THORD DANIEL HEDENGREN 
Author, designer and speaker 

iPad apple.com/iipad 

The iPad is great for doing wireframes, especially 
when you complement if with a nice stylus, 

Basecamp ba5ecamp.com 

Basecamp is a great way to organise yourself. The 
service will save you time and energy. 

GitHub aithub.com 

GitHub is Git for the rest of us; great for managing 
your code and inviting others to collaborate. 

TOM! TONTTI 

UX Lead at White Sheep Isobar, Finland 
Live View for iPhone & iPad 

w w w.za mbetti-com/p roiects/li ve vie w 

Brilliant, yet simple remote screen viewing app, See 
your design on a device while you're still designing it. 


A reference to mobile app design patterns, illustrated by 
hundreds of screenshots. 

pencil en.wlKlaedifl.QrQ/wiKi/Fencll 

Perfect tool for making quick real-size mobile interface 
sketches and paper prototypes. 

ZEH FERNANDO 

Senior Developer al firstborn 

Charles www.charlesprQxv.CQm 

A very handy tool to inspect and manipulate the date 
gets transferred around your computer and a server, 

Chrome browser 

w w WiQQgq If ■ wm/l nll/sn/ch rcm s/brsm sf r 

Chrome's inspection and debugging tools for HTML. 
CSS and JavaScript are nothing short of revolutionary, 
j GooeleDrivedrive.aoociJe.com 

Great for making notes and sharing between the team. 
Sometimes considered the poor man's Project 
Management suite, but one that is very flexible when 
used well, 

GROUP94 

Belgian design agency 
J5DN kon oro 

JSQN [JavaScript Object Notation) is a lightweight 
date-interchange format. It is easy for humans to read 
and write, it is easy for machines to parse and generate. 

Screen Ruler www.micrQfox.com 

The best solution to check if things are positioned 
pixel-perfect! We're using it since day one at group94. 
Lorempixel lQremuixel.com 

Lorem pixel provides dummy images width the 
dimensions of your choice. 


MAGNUS DAHLSTRAND 
Clipmemi ww yy, 1 1 j pm CIJ Hi C9fP 
BetterSnapTool 
itu ne5.apple.com/us/app/ 

hietLeranacLflfll 
iTemi2 www.iterm2.com 


| Wires a uirktools. com/wires 

\ Aviary Image Editor 

i a<]Yarn:&d l flYlflrY.CQm/lQOI&/ 

| imaae-editar 

: 

= SCOTT STAAB 


\ Evemote www.evernote.com 

MARCEL KORNBLUM j Google Image tools ww w.aooa I e. 

CharlescharlesDroxv.com j 

Liveview zambetti.com/Droiect5/ j WhatTheFont 

livevi&w \ www.mvfonts.com/WhatTheFont 

OmmGraffie www.QmniQrOUP. j 

QQm/prQducts/QmnifirflrflQ ; jakuesodomka 

\ Capture screenshot 


PETE SIMMONS 
Firebug -ant firebug com 


Dreamweaver CSG 


adobe.com/prQduct5/ 

dreamweaver 


S thr9mg.qwq,taQffm/YYEtal9re 

| Dronlr clropJj.com,/hello 
j Fontcase 

j www.bohemiancodina.com/ 

j fon tease 

j LUBOSBURACIMSKY 


ROBERT STAIEKER 
Screen fly guirktools.com/ 
screen flv 


j Bootstraps twitter.qithub.com/ 

i Chrome Sniffer 


Ehrems.mqlg.wm/fffbstBrE/ 

detail 

TexturePackerGUI 

www.codeandwetJ.cQm/ 

tfi,a.lut£QacLaf 


KIERON HOWARD 
SymfonyZ www.svnifonv.com 



MATT GIFFORD 
coidF usionio ca[dluflJan,Qflin 
Brackets brackets, io 
PhoneGap Build API build. 
phQneqap.com/dpcs/api 
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<tutoiials> 


Create an 
interactive 3D 
interface 
using WebGL 

WebGL is hardware accelerated, native 3D 
graphics for web browsers, and here we 
harness its power to create a 3D interface 



tools I Uh; 1 i I trends Dreamweaver A WebGL enabled browser 
export Mark Shufflebottom 



ebGL has been around for a little while now, 
and the threejs library is really coming of 
age with each new release. WebGL on the 
whole is incredibly complicated, with 
mounds of code needed just to get a 
:::::::: polygon to display. The threp library 

abstracts all of that and gives you access to 
simple JavaScript commands that allow you 
as a web designer or developer to create 
stunning 3D scenes in the browser, The 
ibrary now fully supports the COLL ADA model formaL 
which is an XM Phased model, so is easy far browsers to 
read. This format also supports animation so feel free to 
incorporate fully animated content from your 3D 
application in your browser. 

In this tutorial we are going to import a model in the 
COLLADA format and add interactivity to models 
contained within the overall COLLADA scene. We will 
attach mouse events to these models, which will give us 
effectively a 3D interface far a website or application. At 
present WebGL is supported by all the major browsers 
except Internet Explorer, which has no plans to support it 
because WebGL is based on OpenGL (the open graphics 
ibrary] and Microsoft tee DirectX instead. However, there 
are plug-ins available that will render WebGL. Please note 
that some browsers can only load models if they're 
accessed via a web server. 


WebGL on the whole is incredibly 
complicated, with mounds of code needed 
just to get a polygon to display 


n Getting started 

^ f It's probably a good idea to start by 
downloading tnree js from GitHub f qlthub-comj 
mrdoob/three.is) . Have a look through the projects to 
get an idea about WebGL. Now copy the start folder to 
the desktop and open index.html in Dreamweaver. 
There is some CSS already in there so add this code to 
the head section. 

001 <meta name= J, vievjport ,J 
ct>ntent- J 'width=device-width, user-sealable=no t 
mini nun-sea le=1.0, maximum-s cale=1.0"> 

002 <link href='http://fonts.gopgleapis.com/ 
css?f amily=Merriweather:700' rel= 'stylesheet' 
type=’text/css"> 


. Body content 

We're going to add some text to the project, so 
paste the code shown below into the body section of 
the page. Tins adds a heading and a box that will only 
be shown when we roll over various models in the 3D 
WebGL scene with the cursor. Change the text here, to 
have some real content 


001 <div id= J 'header ,J xhl>Oiscovery Centre</ 
hlx/div> 

002 <div c las s= JI info" 

id= "mountsin'"xh?>McHintain Va 1 ley^/h 2> 

003 <p>Ygur text here, </pX/div> 


A Copy the info 

Copy the entire div with the class info and paste 
it after itself twice. Change the id of the first copy to 
'lake' and the second to 'forest' These are the two 
content sections which are hidden to start with, but 
when the user roils over points in the scene, this 
content will be made visible. 


001 <div elass^'info" id= J, forest <t xh2>Forest 
Trails</h2> 

002 <p>Your text here.</px/div> 


Link to libraries 


keeping inside the body tag add the following 
lines, which link to the JavaScript libraries that we use. 
The first is the main thieej s library, while the second is a 
library for loading COLLADA models (an XML 3D model 
file). The detector code is used to see if the user has 
WebGL, while the remaining two are extensions to odd 
events to 3D objects. 


001 escript sre= M j s/Three. js H x/scrlpt> 

002 <script src=” js/ColladaLoader. js"x/ 
script> 

003 <script src="js/Detector. j$"x/script> 
004 <script src =1 j$/three*.domevent.j$ J ></ 
5cript> 

005 <script src='js/threex.domevent , object3d . 
]5'x/script> 
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Create an interactive 3D interface using WebGL | 



Detecting WebGL 

Using newer technology like WebGL requires 
you to ensure that the user knows if there is a problem. 
White most web browsers support WebGL. IE has no 
intention of doing so. There are plug-ins available for iE 
though. Add this code to detect WebGL. 

001 <script> 

002 if ( 1 Detector.webgl ) Detector. 
addGetWebGLMessageQ; 

Adding variables 

This is perhaps not one of the most exciting 
parts of our code, but these variables hold many 
important features that make our WebGL application 
work. Scene, camera and renderer are the basics 
required to get a WebGL scene Obviously we then 
need content to make the scene actually work. 

001 var scene t camera, Tenderer, model, 
ground, rot; 

002 var rotate=true, over=false; 

003 var loader = new THREE.ColladaLoaderQ; 

004 var mnt T inbox, lk, lbox, fr, fbox; 


Loadthescene 

The next block of code that we add toads the 3D 
COLL ADA model into our scene. The scene is stored in 


our model variable that we’ll use later on. The scene is 
scaled down, and then two functions are called. First we 
call the init function, to initialise our scene, and then 
after LhaL we call the animate function - this will make it 
move for us. 

001 loader.loadt 'scene.dae', function ( 
collada ) { 

002 model = collada.scene; 

003 model.scale .k = model.scale.y - 
model,scale,z = 0,125; 

004 initQ; 

005 animateQ; 

006 } 

Qg Initializing the scene 

To start our project we will create the I nit 
function, The first line creates a new div, which is then 
placed into the body. This will later be used to render 
our scene. The next line sets up a new scene that will 
hold everything we need to add. such as lights, models 
and a camera. 

001 function initQ { 

002 var container = document,createElement( 
'div' ); 

003 document,body,appendChiId( container ); 

004 scene = new THREE,Scene(); 


requestAnimationFrame { 

You will notice that 
requestAnimationFrame is used 
in the code, this is a browser j 
vendor API to save developers 
from using timer loops. Instead - 
the browser handles the loop 
for us, pretty handy! 


09 Creating the camera 

The camera is a virtual way of controlling what 
we actually look at, It takes three arguments, the field 
of view, the aspect ratto and how near and far it can 
see. Here we position the camera and tell it which 
direction to look, which as you can see is almost the 
centre of the scene. 

001 camera = new THREE,PerspectiveCameraC 40, 
window,innerWidth / window, innerHeight, 9,01, 
10&0 ); 

002 camera.position,set( -45, 12 f 15 ); 

003 camera.lookAtC new THREE.Vector3( -1, 2, 

4 } ); 

004 scene.add( camera ); 

Adding interactivity 

We add interactivity to the models by using a 
plug-in from www.learninqthreel5.com. The first line of 
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Discovery Centre 


Discovery Centre 



Discovery Centre 


*Tnp left, clockwise;* 

* The scenery in the 
model Is located and 
made la spin. When the 
mouse rolls over this* it 
slows dawn so the user 
can select an 
Informaflcrtn point 

* Information points are 
the bright pink cubes in 
the scene Ihat are given 
mouseoverand 
mouseout events 

* When the mouse 
moves over the 
information points Ibey 
trigger the event, which 
turns on the appropriate 
content area, creating 

a rollover information 
point on screen 
-When the mouse is 
over the forest 
information point, the 
appropriate text 
appears In a box, 
positioned on the 
r«ght hand side 






code enables me camera to look at which model is 
under the mouse, The next line gets the ground plane 
from the COLL ADA model. We can then add mouse 
events for when the mouse is over or has left leading 
us to turn on and off the rotate variable causing the 
scene to rotate or not. 

001 THREE*Object3D,_th re-ex DomEvent, 
camera(camera); 

002 ground = model.getChildByName( 'ID276 f r 
true ); 

003 g round.on('mouseout', functionQ{ 
rotate=true; 

004 }); 

005 ground * on ('mouseover', function Q{ 

006 rofate=false; 

007 }); 

Mountain point 

The first line of the code grabs the mountain 
information point from the COL LADA model and stores 
it in the variable mnt. The mountain text in the div tag 
wiLh the id mountain is stored in the variable mbox. 
When the user moves the mouse out from the model it 
sets the mbox to be invisible. 


001 mnt - model-getChildByWame( r ID43\ true }; 
002 mbox = document ,ge til ementBy Id(" mountain' 1 ) ; 
003 mnt. on (■'mouseout', function ()( 

004 mbox.style.visibility - "hidden''; 

005 over=false; 

006 }>; 

Mouseover mountain 

When the user rolls their mouse over the 
mountain information point, the relevant text becomes 
visible in the mountain div tag. In this way we create 
content that becomes visible when we rollover parts of 
the 3D model, and it disappears when the mouse 
moves out. The variable over is set to true to stop the 
whole model rotating. 

001 mnt.on('mouseover 1 ', function()( 

002 mbox.style.visibility - "visible"; 

003 over=true; 

004 }); 

, More interactivity 

Similar to what we did in step 11, we store the 
lake information point model in the variable Ik and the 
div tag named lake in I box. When the cursor moves out 


Adding content 
to threejs Scenes 

In earlier iterations of the 
three.is framework, you had 
to use scene.addCamera to 
add specific features. Now, 
however, there is a global 
scene.add that you can add 
all models, lights and 
cameras. 


from the lake information point we turn the visibility of 
the lake div tag off so it can! be seen in the display. 

001 lk = model.getChildByName( J ID25'„ true ); 
002 Ibox = document.getElementByldC"lake"); 
003 lk,on('mouseout', function(){ 

004 lbox.style.visibility - "hidden”; 

005 over=false; 

006 }); 

Going over the lake 

When the user moves the mouse over the lake 
information point, we again use this to turn on the 
visibility of the lake div tag so that the content 
connected with it becomes visible on the screen. As 
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Accessing the 
model names in 
the COLL AD A file 


In the tutorial we access the COLL ADA 
model and get access to specific 
Internal models to give us the rollover 
points. You will have noticed that 
these internal models have unhelpful 
names such as 1D2S. You may well 
wonder how we know that this is the 
name of the specific model or 
whether we named our model by such 
a peculiar name by choice? The 
answer is wrapped up in the software 
that was used to create the model. We 
used Cinema 4D. which allows each 
model to be named, however these 
names seem to disappear when we 
export to the COLLAD A model format- 
With this format being an XML-hased 
structure, we opened the model in a 
text editor and did a search for 
lakePoint, which has a nodelD value of 
ID25,so we use this to get access toil. 


you can see this is very similar to creating mouse 
events in the regular DOM. 

001 lk.on('mouseover J r function(}{ 

002 lbox, style .visibility = ''visible 1 '; 

003 over-true; 

004 }); 

Accessing the last model 

You have probably got the hang of this by now, 
and so in this code we ogam access the model for the 
forest information point this time end store it in the fr 
variable. We store the associated div in the fbox variable. 
Using those variables we turn the visibility of the text off 
when we roll the mouse out of the model. 

001 fr = model.getChildByWame( 'ID34' r true ); 
002 fbox = document.getElementById("forest"); 
003 fr r on('mouseout', function{){ 

004 fbox, Style .visibility = ''bidden' 1 ; 

005 over-false; 

006 }); 


Final rollover 

Finally we add the rollover for the forest 
information point. As done previously, we check if the 
mouse is over the model and turn on the visibility of the 
text so that the right information is displayed as we role 
over tiie model. This concludes the interactive features 
of the site. 

001 fr.on('mouseover' f function!)! 

002 fbox,style.visibility - "visible"'; 

003 over=true; 

004 }); 

Lighting up the scene 

Our next section of code actually adds the 
COLL ADA model into the scene so that it can be 
displayed. We then create an ambient light that has a 
dark grey colour and full luminosity, which is the 1 in the 
brackets. This light is also added to our scene. We do 
not have to position this as it just gives ambient light to 
the whole scene. 

001 scene,add( model ); 

002 var ambient= new THREE. AmbientLight( 
0x333333 h l ); 

003 scene,add( ambient ); 

Add a spotlight 

Now the code sets up a spotlight this can be 
placed in a position and targeted to light specifically. 
This is given a warm, almost white colour and is set to 
be stronger than 1. The light is set to the same position 
as the camera and is pointing towards the centre of the 
scene. Finally this light Is added to the scene- 

00 1 var light = new THREE,Spotlight( GkFFDDDD, 

i-2 ); 

002 light.position = camera.position; 

003 light,target.position.set( 8, 0, & }; 

004 scene,add( light ); 

Rendering the scene 

To make the scene visible we need to have a 
Tenderer to actually draw the scene. Notice how the 
Tenderer sets the anti-aliasing of the objects to true to 
give softer edges to the models. The render size is set 
to the inside dine ns ons of the browser wndow. The 
tenderer is added to the container we added in step S. 

001 Tenderer = new THREE,WebGLRenderer( { 
antialias; true } ); 

002 Tenderer,setSize{ window.innerWidth f 
window,innerHeight ); 

003 container,appendChiId( Tenderer, 
domElement }; 

004 } 

Create the animation 

The animate function contains the code that 
moves models on the screen. The i statement checks 


that the user hasn't got the mouse over the model and 
not over one of the information points, it then rotates 
the scene. Otherwise it slows the rotations down so it's 
easy to hold the mouse over the information points. 

001 function animate!) { 

002 if(rotate=true &S over==fal5e){ 

003 rot=0,00S; 

004 } else if (rotate==false II over-true)! 

005 rot-rot*0.95; 

006 } 

Update the display 

The final code here updates the model position 
with the value of the rot variable, The Tenderer is told to 
render the scene using the camera. The animate 
function is set to be called at 60 frames per second 
using the requesLArlmationFrame function. The 
function and the code block is closed. 

001 mode1.rotation.y+=rot; 

002 Tenderer,render( scene, camera ); 

003 requestAnimationFrame! animate ); 

004 } 

005 </script> 

Test the project 

We have now finished all the code for the 
project, so save the file and test it in your browser. The 
main scene will rotate; if you move the cursor over the 
scene it will stop rotating by slowing down gradually. If 
you move your cursor over one of the pink information 
points, you will get the appropriate information appear 
in a box. 
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Serving 
images to high- 
resolution 
screens 

As high-resolution screens become 
more and more commonplace, we 
need ways to display graphics that take 
advantage of their capability 

tools I tech I trends C 5 S 3 , HTML 5 , JS 
expert Ben Fra in 



he latest iPad has a 2,048 x 1,536 
pixel resolution at 264 pixels-per- 
inch (PPI) screen, the iPhone 4 and 
i Phone 4S have greater pixel 
density: 960 x 640 pixel resolution 
at 326 ppi. It isn't just Apple's devices 
that can be considered high- 
resolufcn, even if they donl boast 
marketing tenms like Retina display. 
The HTC One X uses a 4.7-'inch 
display, with 312 PPI for example; and 
even Sony's latest handheld gaming device, the PlayStation 
Vita, has a 220 PPI screen, We now have Apple's Retina 
display MacBook Pros too, at 220 PPI, It's easy to see where 
this is going pretty soon high-resolution/PPI displays will be 
the norm on all devices that access the web. The pickle at 
present c that while text looks beautiful on these devices, 
web images usually donl As high-resolution devices often 
have two dots per CSS pixel, the reset is that images end 
up looking blurry. 

Thankfully, there are a number of things we can do to 
address this issue. Let's take a look at how CSS3 media 
queries and icon fonts can ease our pain, and then deal 
with the obvious elephant in the room; delivering alternate 
tmages in markup. 


Oi CSS minimum-resolution 

CSS3 media queries can be used to target 
high-resolution/PPI screens; we can use them to serve 
different background images depending upon the pixel 
density of the device. Gy now you are no doubt familiar 
with the media query syntax. Let's suppose we want to 
show two images, one for standard screens and one for 
high-PPl devices. We can go ahead and use the old 
min-resoiution property: 

001 ■airedia (min-resolution; 96dpi) ( 

002 /* rules here would apply to a normal 

screens */ 

003 } 

004 @media (min-resolution: 192dpi) { 

005 /* rules here would only apply to high- 
resolution screens */ 

006} 

32 About those iDevices 

Sadly WebKit (JOS, Android, Safari, Chrome and 
others) hasn't implemented min-resolution, and so we 
need to use WebKit's own property. St uses a simpler 
system where the value represents the pixel density of 
the device. A 'normal' screen will have a pixel ratio of 
one. An iPhone 4 or similar, on the other hand, could be 
targeted like this: 

001 @media (-webkit-min-device-pixel-ratio: 2) 

002 { 

003 /* Webkit high-resolution specific rules 

here */ 

004 } 


03 Other WebKit devices 

While the WebKit prefixed rule also targets 
Android devices, many Android handsets (although still 
enjoying high-resolution screens), don't have quite the 
same pixel density as something like an iPhone 4,4S or 
new iPad - and none have anything near Retina display. 
Therefore, you may want to lower the threshold to 
include more devices, 

001 &nedia (-webfcit-nin-device-pixel-ratio: 

1.5) C 

002 /* lcwer threshold rules here */ v 

003 } 

Mozilla is different 

Another vendor, another expression! Mozilla uses 
a comparatively odd syntax, if you wanL to target 
high-resolution/PPI devices that might be using a Mozilla 
based browser such as Finefox, pay special attention as 
the minimum part of the expression is written first 
followed by a double-hyphen: 

001 (Shiedia (min—moz-device-pixel-ratio: 2 ) { 
002 /* Mozilla rules here */ 

003 } 

05 Opera syntax 

Unbelievably, Opera uses a different syntax again, 
While similar In syntax to WebKifs version (albeit with an 
-o- prefix as opposed to -webkit-l Opera has opted for a 
ratio representation of the pixel density, For example 
instead of writing 2 as the value (as you would with 
WebKit), it must be presented as 2/l. 



001 @media {-G-min-device-pixel”ratio: 2/1) { 
002 /* Opera rules here */ 

003 } 


06 The W 3 C way? 


* ~ Owing to the prevalence of the -webkit- prefixed 
version of this media query, you may be forgiven for 
assuming that the W3C would follow suit, declaring an 
un prefixed version of that syntax as the global web 
standard. However, as minimum-resolution already 
existed, they have not done this and have instead ooted 
to add a new unit of measure, dots per pixel, written as 
dpptx in CSS. Below is what the syntax is likely to be 
styled as in the future. 


001 @media (min-resolution: 2dppx) { 
002 /* rules here will apply to high 
resolution media in the future */ 

003 { 


07 Full vendor stack 

Let's go nght ahead and put all these previous 
vendor versions together with the likely W3C 
implementation (dppx), into one media expression that 
we can use to bulletproof this technique whenever we 
implement it. The user-agent (whichever browser you are 
using) will happily ignore any expressions that don't apply 
and render the one most relevant, ensuring cross¬ 
browser functionality- 

001 @media (miirresolution: 192cfci) r {-webkit- 
min-device-pixel-ratio: 2), (min—moz-device- 
pixel-ratio: 2), (-o-min-device-pixel-ratio: 
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2/1) r (min-d^vice-pixel^ratio: 2 ), (min- 
resolution; 2dppx) { 

@02 /* High Resolution styles go here */ 

003 ) 

qj A use case 

Let's su ppose we wanted two versions of a site 
logo, one for hig ^resolution screens and another for 
everything! else. Using our full vendor stack from the 
previous step to achieve parity across browsers, here is 
an example of how we could set one image for normal 
screens and another for high pixel-density displays: 

@01 . logo { 

00 2 bac kg round-image: urlimg/logo. 

png r ); 

003 } 

004 Omdia (min-resolution: 192dpi),. (-webkit- 
min-device-pixel-ratio: 2), (min—moz-device- 
pixel-ratio: 2), (-o-rnin-dev ice-pixel-ratio: 
2/1), (iriin-device-pixel-ratio; 2), (min- 
resolution: 2dppx) { 

005 ,lcgo { 

00-6 background-image: url( r logG@2K,png'); 

007 > 

008 3 

09 Making it fit 

::: ~ r Wh He that wl ll display the correct image, if we set 
a hign-resclution background image as our logo, and the 
lego div it sits in is smaller in pixel size than the image, 
ordinarily it will overflow the container. Thankfully, there is 
a C5&3 property that can solve our issues. We can use 


the background-are property with a px value or contain 
value to make it fit: 

001 (^nedia (min-resolution: 192dpi), (-webkit- 
min-device-pixel-ratio: 2) h (min—moz-device- 
pixel-ratior 2) f (-o-min-device-pixel-ratio: 
2/1), (min-device-pixel-ratio: 2) r (nin- 
resolution: 2dppx) { 

002 r logo { 

003 background-image: url('logo@2x.png'); 

004 background-size: contain; 

005 } 

006 ) 

10 Background-size options 

The background-size property can also take 
numerical values, Using pixels for size can be useful if 
you want your images to stay a set size within a fluid 
container. The width is given first, then height. If no 
height is given, auto is assumed for the height A 
percentage can also be used and this will render the 
image as a percentage relative to the container. 

001 .background-size-dimensions { 

002 background-size: 39@px 30@px; 

003 3 

11 Naming conventions 

You'll notice in step 3 tfiat the high-resolution 
logo file name «s the same as the standard resolution 
targeted one except it has been suffixed with @2x' 
before the file extension. This is a naming convention 
used lay Apple when targeting their Retina displays. It's 


actually not necessary, but many pre-existing JavaScript 
solutions use this convention- so it may be something 
that is worth adopting. 

001 standard { 

002 background-image: url('image,png J ); 

003 3 

004 r high-resolution { 

005 background-image: url {‘imaged, png'); 
006 } 

Icon fonts 

If you want to provide scalable icons for a design, 
there is a better option than images: icon fonts. There are 
a growing number of icon fonts available, and they can 
be included in a design using the ©font-face rule. You'll 
need a version of your icon font in WOFF, SVG, EOT and 
TrueType to cover all browsers. Then use the ©font-face 
rule to include it. 

001 @font-face { 

002 font-family: *hr J ; 

003 sre: url( l fonts/hr,eot') ; 

004 sre: url( 1 fonts/hr, eot?#iefi.x*) 

13 Setting up defaults 

In this example we are using fonts from icoMoon 
(which can be found here keyamoon.com/ 
loomoon/#toHom&l which are mapped to characters. 
Therefore, we can add them by adding a particular class 
to the icons needed in the markup. First of ail, well define 
styles that will be particular to all the cons. This will cover 
us wherever the classes are ordered among others. 
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* pjclurelllLis. bv Scott Jehl provides the ability to 
s-wap out alternate images defined in markup 


• SVG Images scale well, much like lean fonts, and are 
a good choice where browser support Is acceptable 



001 [class'^icon-"];before, [class*-" icon- 
”]:before { 

002 font-family; *hr ? ; 

003 font-style: normal; 


Adding with class 


* We can now add the relevant icon wherever we 
want by adding the relevant class, The icon is inserted 
before the element it is added to. If you want the icon to 
appear afterwards simply amend the pseudo selector 
from before to after. 


001 . icon-chrome:before f 
002 content: “\21"; 

003 } 

004 , icon-firefox: before { 
005 content; "\22 ,F ; 

007 .icon-opera;before { 
008 content: “\23"; 

@09} 


010 .icon-globe:before { 
011 content; “\ 24 "; 

012 > 

013 .icon-check-alt;before 


{ 


014 content: “N25"; 

015 } 


15 Adding icons inline 


Adding the icons inline without a pseudo selector 
is not a good idea semantically, as the content is 
meaningless. If you wish to, remember to use character 
entities for each number. Otherwise the number will 
appear as is, Here, we are adding all the icons in a row, 


001 /* CSS */ 

002 .icon-insert { 

003 font-family: ‘hr'; 

004 font-style: normal; 

005 speak; none; 

006 font-size: 5 em; 

007 } 

008 c!-HTML —> 

009 <p cla$s=”icon- 
insert">8#x21; E#x22; &#x23; 
&#x24; &#x.25;</p> 


16 Inserting as data attribute 


You can also use data attributes to insert icon 
fonts. This lets you keep the icons out of the actual page 


content itself, Remember that any attribute beginning 
'data-' in HTML5 is perfectly valid code, so it isn't going to 
sour the markup for validators. Insert the icons in the 
markup in the same way as the previous step: using 
character entities. 

001 /* C$5 */ 

002 [data-icon]:before 

{ 

003 font-family: ‘hr'; 

004 content: attr(data- 
lcon); 

005 speak; none; 

006 font-size: 5em; 

007 } 


17 Font flexibility 


By using fonts, the icons will scale to any 
resolution and can have colour, text-shadows and even 


experimental '-webkit-mask-image' values (for WebKit 
browsers! added. What's more, compared with images, 
the file size is tiny. For the five icons used here, the largest 
font that would be served is just eight KB (before gap! 


001 [class*=”icon-”]:before, [class*=” 

icon-”]:before { 

002 font-family: ‘hr'; 

003 font-style: normal; 

004 speak: none; 

005 font-size: 5em; 

006 color: green; 

007 -webkit-mask-image: 

-webkit-linear-gradient(white 
f rgba(0,0,0,0.7>); 

008 text-shadow ;0 -Ipx 
black; 

009 } 


18 Using Picturefill 

There is no proper way to add alternate 
high-resolution images such as photos an markup yet. 
One solution is to use Picturefill. a JavaScript solution that 
follows a markup pattern similar to the HTML5 <video> 
tag, After adding the Picturefill JS file within the markup, 
alternate images can be specified using media query 
style expressions. Note the slightly different syntax 
present for the media query. 

001 <div data-picture data-alt=”An 
image, whose source changes depending 
upon the media query style expressions^ 
002 <div data-src=”normal. jpg' r x/div> 

003 <cfiv data-src= H high- re solution, 
jpg” data-media=”(min-resolution: 

192dpi ) t (-webkit-inir-device-pixel- 
ratio: 2),(min—moz-device-pixel- 
ratio: 2),(-g-min-device-pixel-ratio; 

2/1) r (rnin-device-pixel-ratio; 2), (min— 
resolution: 2dppx)”x/div> 

004 <3— Fallback content for non-JS 
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browsers. Same img src as the initial, 
unqualified source element, —> 

005 <noscriptximg src- ,f norma 1. jpg fr 
alt="An image, whose source changes 
depending upon the media query style 
expressions”></noscript> 

006 </div> 



* A great tool for delivering images on a responsive 
website can also be used to deliver h*gi>resolL!tion 
images where needed. Head over to adaptive-images, 
com and after installing (you are going to need access to 
your server's .htaccess file), alter toe standard line of 
JavaScript used, to: 

001 <script>document. 
cookie='resolution^’+Math.max(screen. 
width,screen,height)+(“devicePixelRatio” 
in window ? **, "tdevicePixelRatio : 

",l p ') + f ; path=/' ;</script> 

Uploading high-resolution files 

'*■ * When using Adaptive images for high’resolution 
»mages, you'll probably want to limit which images are 
processed by it. You can limit this by altering toe. 
htaccess file. For example, if we didn't want Adaptive 
Images to resize images inside a folder called no-thanks 
(folder addresses are root relative) we could add a line 
that looks like this 

001 RewriteCond %{REQUEST_URI} I no-thanks 

2i Fit and forget 

One great thing about Adaptive Images is it works 
by re-using existing images where possible for 
high-resolution screens. For example, if viewing on an 
iPhone 4 in portrait, Adaptive images will multiply the 
CSS pixel-width of toe device (320px) by the pixel density 
reported (2) and use that value (640 px) to check and use 
an image matching tfiat size where possible. 



22 SVG files? 

If you have vector images, another option is to 
consider exporting them SVG(Z) files. Like icon fonts, SVG 
images (whether background or inline) will scale well 
regardless of screen size and pixel density. Browser 
support is generally good (IE9+) and file size is typically 
far tower than a PNG/JFG equivalent, 

001 ,svg .logo { 

002 background-image: urlC'lago.svg’) ; 
003 } 


Code library 

All you need to use icon fonts 

You can use icon fonts in a number of ways. They can be inserted 
with data attributes, class names or directly in the markup 

001 $font-face { 

002 font-family: 'hr 1 ; 

003 src: url(*fonts/hr.eot')j 

004 src: url(‘fonts/hr,eot?#ief lx r ) fomatCenbedded- 
opentype r ), 

005 url('fGnts/hr.5vgJ^'hr , ) format{' svg f ) „ 

006 url('fonts/hr.woff r ) format ('raff')„ 

007 url(*fonts/hr.ttf*) format(‘truefype*); 

008 font-weight; normal; 

009 font-style: normal; 

010 } 


First include the Icon font 
using the @font-face 
declaration, with 
different font files for 
different browsers. 


Use the CSS attribute 
selectorifyou want to 
add Icons with data-icon 
attributes. Adjust the size 
to suit 


To addicons with classes, 
set the defaults using 
CSSS substring matching 
attribute selectors and 
use the content property 
to add the Indlv idual 
Icons for each class, 


001 [data-icon]-before { 

002 font-family: 'hr J ; 

003 content: attr(data-icon); 
004 speak; none: 

005 font-size: 5em; 

006 } 


001 [class*=”icon-"]:before, [class*-" icon-"]:before { 
002 font-family: 'hr- 1 ; 

003 font-style; normal; 

004 speak; none; 

005 font-size: 5em; 

006 color; #fff; 

007 -webkit-mask-image: -webkit-linear-gradlent(white,rg 
ba(0 f 0 f 0,0,7)); 

008 text-shadow:0 -lpx black; 

009 } 

010 , icon-chrome:before { 

011 content: 

012 } 
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Create tabbed 
boxes with 
multiple loops 
for WordPress 
themes 

This tutorial will teach you how to add a 
tabbed box with content from several 
categories to your WordPress theme 

tools I fecit I trends WordPress, RHP. HTML, CSS and jQuery 
expert Thord Daniel Hedengren 


ometimes you want to offer your 
visitors even more options to dive into 
your site than just a list of posts and 
whatever headline solution you might 
have employed for your front page. This 
" tu torial aims to teach you about one of 

the options at your disposal, namely the 
tabbed box. Well create three different 
loops and let the user switch between 
them using tabs. The same multiple loop 
technique could obviously be employed with sliders or 
whatever solution that suits your fancy. As for the 
tabbed box, well rely on jQuery since it already ships 
with WordPress and is a popular and well known 
JavaScript library these days. 

Before we get to the actual tutorial though. I'd like to 
talk a little bit about tabbed boxes (and content sliders 
for that matter). You see. it is important to use these the 
right way, because if you don't, you're not only adding a 
feature users will ignore, you're adding clutter and site 
weight overhead as well. Tabbed boxes that don’t fill a 
specific need, sporting supporting content or additional 
ways into the site that the visitor will actually want to 
use. just shouldn't be there. There's also the mobile 
aspect to take into account, so make sure your tabbed 
box works well in mobile browsers should you choose 
to include it there as well. 

Use tabbed boxes and sliders with caution: make 
sure you think them through, and you'll be just fine. 
Less is more, you know. 




01 Decide what you’re doing 

Before we attorn pt to do anyth ing at al I, we need 
to figure out exactly what it is we're doing. We'll create 
three separate loops that list content from three different 
parts of the site. For this we are going to use categories 
and tags, so this is where you decide which categories 
to use. For the purposes of this tutorial, we will be using 
the categories Superstar and Movies, as well as the tags 
Duck and RabbiL 


02 Where to put the box 


You obviously need to d ecide whe re you r box 
should be. For this tutorial. I have created a child theme 
for the Twenty Eleven theme, and copied the •ndex.ohp 
file to the child theme so i can make edits without 
having to worry about the theme breaking when it is 
updated by the author. You can do it any way you want; 
the files are available with this issue. 

If you want to learn more about child and parent 
themes, read up on them in the WordPress Codex 
(codex worduress.org/ChiId Thernes) or alternatively 
you can check out my book. Smashing WordPress 
Beyond the Blog. 3rd Edition. 


But really, where did you put 
us the box? 


We want the box to be just above the content, so plan 
to add it under divicontent In index.ohp, Look out for 
the following code in index, php. just below the get_ 
headerO part. 


001 <div id-'primary"^ 

002 <div id= "content'' role= J, main"> 

003 

004 <!-- THIS 1$ WHERE THE TABBED BOX WILL 

BE — > 


C4 Creating a new loop 

Let's start by creating a new loop. We'll use 
WPjQuery to do the. and then well reset it so it won’t 
interfere with other loops on the site. We’ll pass the 
arguments to Ssuperstar and then we'll loop the 
content, like this: 


001 <?php 

002 // Arguments for WP.Query 

003 $args = array( 

004 'category.name' => 

* superstar t 

005 H showposts h => 5 

006 ); 

007 // The new loop stored in 

Ssuperstar 

008 Ssuperstar = new WP_Query( Sargs 

); 

005 while ( $superstar->have_posts() 

) ; $superstar->the_post(); ?> 

010 <1— Loop output goes here 

— > 

011 <?php 
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•We now have our n rst 
loop, showing five posts 
from the superstar 
category in a 11st at the 
top of thffi site Estep &} 






IrtXUkirtm 


IMttijpg* 


<Lett ? trip to 1iottoni> 

■This Is wherein put my 
tabbed box of links 


* This Is wlial the tabbed 
box will look like,a simple 
design without the need 
far extensive CSS 


> All three loops are in 
place, each with Iheirown 
list,The next step will be 
to ma ke them a tab bed 
box instead 




?> 


// Loop ends 
endwhile; 

// Reset the query 
wp_reset_postdata{); 


Just what we want 

Let's put this into our loop, also adding a div and 
ul container, like so: 

001 <div id= ,F tabbed-box ”> 


Avoid query, 
postsO 

While it is entirely possible 
to use query_postsO to 
create multiple loops, you 
should avoid doing so 
query_postsO is meant for 
small alterations of the J 
main loop. 


Are they really making sequels tn movies 


This loop will fetch the five latest, posts from the 
category superstar. 

Populating the new loop 

Now, we need some actual output as well. Look 
at the code in the previous step, we'll replace the Loop 
output goes here comment with actual linked titles to 
the posts. We'll place these links in a list, so we need to 


002 <ul> 

003 <?php 

004 // Arguments for wp_Query 

005 Sargs = array( 

006 p category_name J => 

'superstar h , 

007 F showpasts" => 5 

008 ); 

009 // The new loop stored in 


014 <?php the_title(); ?> 

015 </a> 

016 </li> 

017 <?php 

018 // Loop ends 

019 endwhile; 

020 // Reset the query 

021 wp_reset_postdata(); 



put each in a li as well. 

001 <li> 


Ssuperstar 

010 Ssuperstar = new WR_Query( fcargs 

); 


022 ?> 

023 </ul> 

024 </div> 


002 <a href="<?php the_permalink(); 
?>" title="<?php the_title_attribute(); 
?> w > 

003 <?php the_title(); ?> 

004 </a> 

005 </li> 


011 while ( Ssuperstar->have_posts() 
) : Ssuperstar->the_post(); ?> 

012 <li> 

013 <a href-”<?php the_ 

permalinkQ; ?> JP title= FJ <?php the_title^ 
attribute(}; ?>“> 


Don’t forget to reset 

Why do you need to reset the data? Weil, if you 
don't you might end up with an altered query for 
subsequent loops, and that is usually such a headache 
to sort out. Use wp_reset_postdataO after your loops. 
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Always queue 
properly 

The purpose of using 
WordPress queue 
methods for JavaScript is 
to rely on the platform to 
make sure everything 
is loaded at the 
optimal moment. 


Create another loop 

it is lime to create our second loop, this one with 


016 // Lwp ends 

017 endwhile; 

018 // Reset the query 
019 wp_reset_postdataQ; 

020 ?> 

og Tag instead of category loop 

Wouldn't it bo great if our third and final loop 
gave us five posts tagged with duck and/or rabbit? 
Basical ly, let's remove the category argument and 


017 endwhile; 

018 // Reset the query 

019 wp_ re se tjpostdata(); 

020 ?> 

ijA Three loops 

now we have three different loops-, each in a list 
of their own, Add a heading above the post lists to 
make them stand out from each other. Here's the full 
code, including the wrapping div and ul tags around 


five posts sourced from the Movies category. You'll no 
doubt recognise the code, the only change from the 
Superstar loop being the category and using Smovies 
instead of $superstar, 

001 <?php 

002 // .Arguments for WF_Query 

003 Sargs - array! 

004 'category_naine r -> J movies', 

005 “showposts' => 5 

006 ); 

007 // The new loop stored in Smovies 

008 Smovies = new WP_Query( Sargs ); 

009 while ( $fi»ovies->have_pQ3t3() ) : 
levies->the_post(); ?> 

010 <li> 

011 <a href="<7php the_pemialink0; 7>'' 

title= J '<7php the_titie_attribute(); ?>"> 

012 <;?php the_titleQ; ?> 

013 </a> 

014 </li> 

815 <?php 


replace it with one for tags, this one accepting posts 
tagged with duck and/or rabbit. Both will work, as will 
fust one of them. 

001 <?php 

002 // Arguments for W^Query 

003 iargs - array! 

004 'tag' -> 'duck,rabbit', 

005 'showposts 1 => 5 

006 ); 

007 // The new loop stored in $duckrabbit 

008 $duckrabbit = new WP_Query( Sargs ); 

009 while ( $duckrabbit->have_posts0 ) : 

td uck rabbit->the_post(); 1> 

010 <li> 

011 <a href="<?php the_permalinkO; 

?>“' title='<?php the_title_attribute(); 7>‘> 
012 <?php the_titleQ; 7> 

813 </a> 

814 </U> 

815 <?php 

816 // Loop ends 


each loop so the lists will work properly. 

001 <div id=” tabbed-bo k if > 

002 <!— First loop, 5 posts from SUPERSTAR 

category 

003 <h3>5 Superstar Posts</h3> 

004 <ul> 

005 <?php 

006 // Arguments for WP_Query 

007 $args = array! 

008 f category_name' => 'superstar', 

009 'showposts' => 5 

010 ); 

011 // The new loop stored in 

Ssuperstar 

012 Ssuperstar = new WP_Query( Sargs ); 

013 while! Ssuperstar->have_postsQ ) 

: $superstar->the_post(); ?> 

014 <li> 

01S <a href="<?php the_permalinkO; 

?> J ' title- J '<?php the_title_attribute(); ?>"> 
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016 <?php the_titleQ; ?> 

017 </a> 

018 </li> 

019 <?php 

020 // Loop ends 

021 endwhile; 

022 // Reset the query 

02 3 wp_res e t_postcf a ta (); 

024 ?> 

025 </ul> 

026 <! — Second loop, 5 posts from MOVIES 

category — > 

027 <h3>5 Movies Posts</h3> 

028 <ul> 

029 <?php 

000 // Arguiaents for WP_Query 

031 largs = array ( 

032 J category_na[ne r 'movies', 

033 'showposts' => 5 

034 ); 

035 // The new loop stored in $movies 

036 kiovies = new WP_Query( Jargs ); 

037 while ( $movies->have_postsO ) : 

$r>ovies->the_postQ ; ?> 

038 <li> 

039 <3 href=”<7php the_permalinlk(); 

7>" title=''<.?php the w title_attribute i O; ?>"> 
040 <?php the„title(); ?> 

041 </a> 

042 </li> 

043 <?php 

044 // Loop ends 

045 endwhile; 

046 // Reset the query 

04 7 wp_res e t_postda ta(); 

048 ?> 

049 </ul> 

050 <!— Third loop, 5 posts tagged with 

DUCK and/or RABBIT —> 

051 <h3>5 Duck and/or Rabbit Posts</h3> 

052 <ul> 

053 <?php 

054 // Arguiwnts for WP_Query 

055 $args = arrayf 

056 'tag' -> 'duck, rabbit' , 

057 'showposts' => 5 

058 ); 

059 // The new loop stored in 

$duckrabbit 

060 $duckrabbit = new ViP_Query( Sargs 

); 

061 while ( $duckrabbit->have_postsQ ) 

: $duckrabbit->the_post(); ?> 

062 <li> 

063 <a href-"<?php the_permalinkO ; 

7> ir title= J, <1php the_title_attribute(); ?>”> 


064 <?php the_title(); ?> 

1065 </a> 

J066 </li> 

067 <7php 

068 // Loop ends 

069 endwhile; 

070 // Reset the query 

071 wp_reset_postda ta(); 

072 >> 

073 </ul> 

074 </div> 

The tabbed box design 

For this example we're going to go with a simple 
tabbed box., with each tab heading sporting a nice fat 
line above itself, The active one is highlighted with a 
black line, while the others are differentiated by having 
light grey ones instead. Within the tab is a simple list of 
links with lines separating them. Nothing fancy, just 
something simple. You could of course create anything 
you want; it is all CSS anyway. 

The tabbed box markup 

The markup for the tabbed box is really simple. 
We’ll have a ultftabs with a li for each tab link. Then we'll 
have three div containers, each containing the content 
of each tab. 

001 <gl id-'tabs"> 

002 <1i id-'tab-content-supersta r" 

class= M tab-item active-tab"> 

003 <a href= l 'java£cript:viewTab('content- 

superstar'); ‘'>Superstar</a> 

004 </li> 

005 <li id="tab-eonterit-movies" class^'tab- 
item"> 

006 <a href-"javascript:vlewTab( f content¬ 

ion i es J ); ">Mov i es</ a> 

007 </li> 

008 <li id-' , tab-content-duckrabbit <l 
c lass= " ta b- i tern "> 

009 <a href^" 1 javascript: viewTab{'content- 

duckrabbit') j'^Duck + Rabbit</a> 

010 </li> 

011 </ul> 

012 <div id=s ri tabbed-box J, > 

013 <div id= N con tent-super star' 1 class= J 'tab- 
content'^ 

014 Content for Superstar tab, 

015 </div> 

016 <div id="content-movies" class= w tab- 
content" style-"display; none;"> 

017 Content for Movies tab, 

018 </div> 

019 <div id^content-duckrabbit" 
class= r, tab-content p ' style="display: none; r '> 
020 Content for Duck + Rabbit tab, 

021 </div> 

022 </div> 


Adding some CSS 

Just the rra-kuo a one won't make t ic markup 
look like we planned, so here's the necessary CSS for 
making it work. 

001 ulfltabs { 

002 float: left; 

003 width: im; 

004 margin: G; 

005 padding: 0; 

006 list-style: none; 

007 } 

008 

009 li.tab-item { 

010 float; left; 

011 inargin-bottom; -Ipx; 

012 margin-right: 10px; 

013 padding: 5px 0; 

014 border-top: 5px solid ieee; 

015 } 

016 

017 li.acfive-tab { 

018 border-top-color; #G0G; 

019 } 

020 

021 divfftabbed-box G 
022 

023 div r tab-content { 

024 float; left; 

025 width: 100%; 

026 margin-bottom: 30px; 


Tabbed boxes and 
wid geta reas 


There are a number of things you 
could do with tabbed boxes and the 
technique presented in this tutorial. 
Thanks to thef legibility of widget 
areas, and the plethora of widgets 
available through plug ins for 
WordPress, it might be a better fit for 
your needs, rather than using loops. 
Employing widget areas instead of 
loops is easy. Just create a dedicated 
widget area per tab (Infunctions.ohD. 
as usual >, and then use dynamic, 
sldefoarO to include them ratheTthan 
the loops. This will let you drop 
widgets in the different tabs and 
hence offer whatever functionality 
you might like. You could take it even 
further and let each widget become a 
tab on Its own, although that means 
you’ll have to alter the JavaScript and 
markup quite a hit. 
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027 background-color: #eee; 

028 } 

029 

030 div. tab-content ul { 

031 margin: 0; 

032 padding-top: 5px; 

033 } 

034 

035 div. tab-content ul li C 
036 margin-bottom: 5px; 

037 padding: 0 10px 5px l@px; 

038 border-bottom: Ipx solid fJfBfBfB; 

039 list-style: none; 

040 } 

041 

042 div.tab-content ul li:last-child { 

043 border-bottom-width: 0; 

044 padding-bottom: 0; 

045 } 

Loading jQuery 

The JavaScript that we use for this tabbed box 
requires jQuery, so we need to make sure jQuery is 
loaded. We'll do this in the theme's fnnrtior.s pop 
because it is better than having to add stuff in the head 
section in head&r.oho. This is easily done with wp_ 
enqueue, scnptO, and since WordPress ships with 
jQuery we just need to pass 'jquery' to it. 

001 wp_enqueue_script( 'jquery' ); 

Queuing jQuery 

To properly queue jQue-y well need to create a 
function that we will then hook onto the wp_enqueue 
scripts hook, hence properly including the script the 
way WordPress wants us to, In functions,oho we'il create 
the wd200_scriptloaderQ function that will contain all 
the scripts we need, and then well attach it to the hook 
with add_actionQ. 


006 jQuery.each(elements, function^index, 
value) C 

007 If Is clicked tab 


008 

if (jQuery(this),attr( J id') -- 

tabid) { 


009 

If Show element 

010 

jQuery(this) r css({ 

'display': 

'block 1 }); 

011 

If Make sure CSS is correct for 

tab 


012 

j Query ('If tab-'+ jQuery{this), 

attr( J id')).addClass(’active-tab’); 

013 

> 

014 

If Is not the clicked tab 

015 

else { 

016 

If Hide tab 

017 

jQuery(this).css(( 

'display': 

:'none“ }); 

018 

If Make sure CSS is correct for 

tab 


019 

jQuery( J #tab-'+ jQuery(this), 


attr('id f )).removeClas5('active-tab'); 

020 } 

021 )); 

Registering the 
tabbedbox.is script 

Although we could just include that in the head section, 
it wouldn't be such a pretty solution. Let's register the 
script so that WordPress can use it with wp_negister_ 
scriptQ. The first parameter is the handle well use to 
include it in just a Pit the second points us to where the 
script is located. Note the use of get_stylesheet_ 
directory uriO here, which works with both child and 
parent themes. The script is in the theme's js folder. 

001 wp_register_script( 'tabbedbox_scri.pt 1 r 
get_stylesheet_directory_uriQ . 7js/ 
tabbedbox.jV ); 





001 function wd200_scriptlaader() { 

002 // Enqueue the script 

003 wp_enqueue_script( 'jquery' ); 

004 } 

005 add_action( J wp_enqueue_scripts', wd20®_ 
scriptloader ); 

ie The necessary JavaScript 

™ ™ Now, we need another JavaScript for the actual 
tabbed box. This script basically changes the display 
elements of the tab content containers, as well as 
applying the active-tab class on the active one. 

001 // Function to view tab 
002 function viewTab{tabid) { 

003 // Get all child elements of J 'tabbed - 

box' 1 

004 var elements = jQuery('#tabbed"box'), 
childrenQ; 

005 // Loop through them all 


Queuing the JavaScript 
properly 

Now we just need to add the script registration to the 
function we created in step 15. along with actually 
queueing the script and it should load properly. 

001 function wd2@0_scriptloader() { 

002 

003 // Register your script 

004 wp_register_script( 'tabbedbox_5cript', 

get_stylesheet_directory_uri() . Vjs/ 
tabbedbox.js' ); 

005 

006 If Enqueue the script 

00 7 wp_enqueu e_script( 'tabbedbox_sc ript J 

); 

008 wp_enqueue_script( 'jquery' ); 

009 } 

018 add_action( 'wp_enqueue_scripts 1 , wd?0®_ 
scriptloader ); 



A working tabbed box 

Look at that, we have a working tabbed box! 
Unfortunately there's nothing you'd want to show your 
grandparents in it. so we'll have to add the loops we 
created before. First of all. add another div container to 
wrap the whole thing in. give it the id tabbed-box- 
container and add the following to style,css 

001 stabbed-box-container { 

002 width: 1®0% f 
003 display: block; 

004 } 


lQ Adding the loops 

This is easy enough, just copy ahd paste the 
corresponding loop to each tab content div container 
Here's the Superstar category loop for reference. Note 
the removal of the h3 heading since that doesn’t make 
sense when you have a visual indicator in the active tab. 


001 <!-- First loop, 5 posts from SUPERSTAR 
category —> 

002 <div id-"content -superstar" class=''tab- 
content H > 

003 <ul> 

004 <?php 

005 If Arguments for WP_Query 

006 Sargs = array( 

007 'categcry_name p => 'superstar', 

008 'showposts' => 5 

009 ); 

010 // The new loop stored in Ssuperstar 

011 Ssuperstar - new wp_Query( $args }; 

012 while ( $superstar->h3ve_postsQ ) : 

$5upe rsta r->t he_post() ; ?> 

013 <li> 

014 <a href-'<?php tbe_peniallnk(); 

?>*' title="T?php the_title_attribute(); 7 > u > 

015 <?php the_title(); 7> 

016 </a> 

017 </li> 

018 <?php 

019 If Loop ends 

020 endwhile; 

021 // Reset the query 

022 wp_reset_postdataQ; 

023 1 > 

024 </yl> 

025 </div> 


21 In all its glory 

This is all there is to it. The complete code for the 
tabbed box is on the coverdisc, loops and all. 

Save and test 

You'll find the finished code as a working child 
theme on the disc. The theme is free to use and abuse, 
so take what you need from it ahd build your own. Just 
remember that you need the parent theme installed for 
a child theme to work, in this case Twenty Ten. 
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Build an 
HTML5 
friend-finding 
app: parti 

HTML5 has some amazing APIs that 
allow web developers to make smart 
sites w :h geolocation aware tech 

tools I tech trends PHP. MySQL HTML5. CSS3 
expert Sam Hampton-Smith 



recent survey showed the 
UK has a smartphone 
penetration of over 50 per 
Ann:::::; cent, meaning more than 

half of UK mobile phone 
users have a smartphone, 
The is fantastic news for us 
web developers, because 
we can really start to take 
advantage of the many 

unique features these devices have, building exciting new 
sites and applications with smartphones in mind, One of 
the benefits of the modern smartphone is that it typically 
supports HTML5 out the box. and in this two-part tutorial 
we'll use one of the other common features - GPS - in 
combination with HTML5's geolocation API to build a 
friend-finding app In the vein of Apple's Find My Friends 
iPhone am. This month we're going to set up the 
server-side parts needed to support our apo. including a 
database, security and the basics of allowing users to share 
thee details with friends. Next month well connect to the 
geolocabon API and use it to present our users' locations. 
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Create a database 

Our web application is going to need a database, 
server-side scripts and client-side scnpts to work. We'll 
start off by creating the database, and for this project 
we've opted for MySQL as the database system. Create 
a new database on your Webserver and name it 
Triendfinder'. Ask your host if you're unsure of how to 
access your MySQL database. 




008 'longitude' DOUBLE NOT NULL r 
009 'hidelocafion' INfT NOT NULL , 

010 PRIMARY KEY ( 'userid' ) 

011 ) ENGINE = MYISAM ; 

A word on security 

For the purposes of a tesLyou might be 
tempted to store the user's password as plain text, but 
you should never be tempted to do this. Instead, when 
it's time to store data in our table, make sure you run 
the password through an MD5 hash to encode the 
password data. It's essential to consider security at 
every stage. 


0 2 Create a user table 

The core functionality of our app will be to 
enable friends to see each other's locations on a map. 

To do this, we'll need somewhere to store details - a user 
table. This will need to store both the user's details, such 
as their name and email address, and their Sast known 
location expressed in latitude and longitude. 



we're also going to require users to log in with a 
password, and well give them a marker to allow them to 
go private with their location. Although this isn't strictly 
necessary (as they could jusi leave the webpage), it's 


relationships between a user and their approved friends. 
To make it more user friendly, we're also going to allow 
users to approve friends fora limited period of time, so 
well create a field to store a permission expiry date. 

001 CREATE TABLE friendfinder','friends 1 ( 

002 'userid' INT NOT NULL f 
003 'friendid' INT NOT NULL , 

004 'expires' DATETItC NOT NULL 
005 ) ENGINE = MYISAM ; 



001 CREATE TABLE 'friendfinder'. users' ( 
002 'userid' INT NOT NULL AL/TO_INCREMENT r 
003 'firstname' VARCKARC 100 ) NOT NULL r 
004 'surname' VARCKARf 100 ) NOT NULL , 
005 'email' VARCHAR( 255 ) NOT NULL , 

006 'password' VARCHAR( I00 ) NOT NULL „ 
007 'latitude' DOUBLE NOT NULL f 


app to automatically allow access both ways when a 
user approves a friend for access, but we suggest that 
each user should approve their friends independently 
for maximum security. This means that when we 
perform lookups later on, it's important to know who 
has approved whom - rather than Just who is 
connected to whom. 


07 Sign-up forms 

Well need to provide some form of method for 
users to register with our website, so let’s start by 
creating a basic HTML form to collect the user's 
details. Keep in mind that we'll need to create form 
elements for all the data we defined in the user table. 
Save your HTML page as ’ reefster.pfip' n anticipation of 
the next step! 

001 <!doctype html> 

002 <html> 

003 <head> 

004 <meta charset="UTF-8"> 

005 <title>Friend Finder - Create An 
Account</title> 

006 </head> 

007 <body> 

008 <fortn action-’register, php” 

itiethod="post J ’> 

009 <Label>Firstname cinput type="text” 

naine="f i rstname” placeholder="First name" 
/><span>Enter your first name^/span></label> 

010 <iabel>Sumame <input type="text” 

name-lastname” placeholder=”Last name" 
/><span>Enter your family name</spanx/label> 
011 <label>Endail <input types”text” 

nane^'email" piacehalder= "Email address” 
/X.span>Enter valid address</span></label> 

012 < label Password < input 

type-'password 11 name-" pas sword" /xspan^Minimum 

6 characters</spanx/label> 

013 <label>8nbsp; <input type="submit" 

value=”Register with Friend Finder” /x/label> 
014 </form> 

015 </body> 

016 </hti!nI> 

Store the data 

The fo-m we've just created costs back to itself, 
so let's add some RHP processing at the top of the page 
to handle post-backs and write the submitted data to 
the database, Add the code shown to create a simple 
implementation of this. Substitute in the connection 
details for your own MySQL database. 

001 <!doctype html> 

002 <html> 

003 <head> 

004 ■qneta charset="UTF-8"> 

005 <tit!e>Friend Finder - Create An 

Accou nt </t i tl e> 

006 </head> 

007 <body> 

008 <?php 

009 if (isset($_POST[‘firstname’]) 

8& isset($_POST['surname’]) &&, isset(£_ 

POST['email*]) isset(SjPOST['password'])) { 

Now that the form has been submitted, let's go ahead 
and create the account in the database. 
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001 Sfirstname = $_POST[*firstriame']; 

002 {surname - S_POST[ 4 surnaine']; 

003 {email = S_POST[ H email' ]; 

004 Spassword - $_PQST[ 4 password']; 

005 

006 $db = mysql_connect("localhost” t 

"friendf'inder”, “dbpassword”) or die("ERRQR: 
unable to connect to the database server,”); 
007 inysq 1 _se 1 ect_d b(“f r iend finde r" , Sdb) 

or die TERROR i unable to connect to the 
database,”); 

008 

009 tsql = “INSERT INTO users 

(firstname, surname, email, password) VALUES 
('{first name','{surname' ,'{email' /Spasswo 
rd*)*; 

010 Sresult = mfysql_query($sql) or 

dieC 4 ERRORi unable to query the database, <! — 
”.$sql. ; 

011 mysql_close ( ) ; 

012 

013 } else { 

014 7 > 

015 <form action^” register, php" 

method="post ft > 

016 <label>Firstname <input type="text” 

name=”firstname” placehclder=”First name” 
/xspan>Enter your first name</spanx/label> 
017 <,label>Surname <input type= H text” 

name-'lastname” placeholder- -Last name” 
/xspanoEnter your family name</5panx/label> 
018 <label>Email <input type=”text” 

naie=' r email” placeholder=”EinaLl address” 
/XsparOEnter valid address</spanx/label> 

019 <label>Password <inpgt 

type-'password” naroe-'password” /Xspan>MininMI 
6 characters</spanx/label> 

020 <label>&nbsp; <input type=”submit" 

value=”Register with Friend Finder” /x/label> 
021 </form> 

022 <?php } ?> 

023 </body> 

024 </html> 


09 Error checking 


As with any user input, we need to ensure we've 
validated it before writing it to the database, and most 


Importantly, protect ourselves against any SQL injection 
attacks. We can do this with a couple of utility methods 
to clean the input and validate it. Update your code to 
match our changes. The code for this step can be found 


on the coverdisc. 


IQ Create a log-in form 


Once the user has registered, they'll need a way 
to log in. This is simple to achieve - create a form to 
collect the user's email address and password, then run 
a query on the database using the submitted values to 


check for validity. If the credentials are good, a row will 


be returned and we can create a user session. 


001 <!doctype html> 

002 <html> 

003 <head> 

004 <meta eharset=”UTF-8”> 

005 <title>Friend Finder - Log In</title> 

006 </head> 

007 <body> 

008 <?php 

009 if tisset(S_POST[ 'email']) && isset({_ 

POSTC*password'])) { 

010 If The form has been submitted, so let's 
check the details 

011 {email = cleaninput($_POST[ ' email’]); 

Clean the email address 

012 {password - md5($JP05T[‘password']); 

013 Password has been MD5 hashed 

014 $db - mysql .connect("local host”, 

"friend finder”, 44 dbpas sword”) or die(“ERR?OR] 
unable to connect to the database server."); 

01B mysql_selec t_db ( “f r iendf inder ” r let)) 

or die(“ERROR. unable to connect to the 
database, 

016 Isql = "select * from users where 
em7il=’ {email' and passworch’ Spas sword'”; 

017 {result = mysql_query({sql) or 

die(“ERRGR: unable to query the database. <! — 
”.{sql. 

018 mrysql-closeO; 

019 if {inysql_num_rowsC$result)>0) { 

020 // We've got a record, so the user has 
provided good details 
021 } else { 

022 // No records returned - so it’s an invalid 
username and password combination 

023 } 

024 } else { 

025 ?> 

026 <form act ion-" log in. php” method-”post"> 
027 <label>EmaLl <input type-”text” 
name=” email” placeholder^” Email address" fxf 
label> 

028 <label Password <input type="password” 
name=”pas sword” /X/label> 

029 <label>&nbsp; <input type- 'submit” 
value=”Log In” /x7label> 

030 </fornr> 

031 <7php } 7> 

032 </body> 

033 </html 
034 <?php 

035 function cleaninput(Sinp) { 

036 // This function cleans out any bad strings 
before insert to database 
037 if(is_array({inp)) 

038 return array Jt^p( _METHOD_, Sinp) ; 

039 if(!empty(Sinp) && is_£tring({inp)) { 

040 return str_replace(array( i \\ t , lI \0 dd , 
"\n dd , "\r*, “ ?d * p M \xia") r array('S\\V , 

4 \\@ d , '\W , - \\r ', Hi \V\ 4 \V** P 
Sinp); 


Building for mobile 
devices 


Website design for mobile devices Is 
exactly the same as design for a 
desktop. The only real difference yon 
should consider Is the screen real 
estate, and lack of a mouse, Otherwise, 
all the same skills you employ In 
designing for a regular computer will 
apply here. 

There ate lots of online tools that 
can help you quickly design effectively 
for mobile platforms. These vary from 
simple CSS frameworks that help you 
define rules appropriate to the device, 
to fully-fledged webapp development 
systems. In this tutorial we touch on 
using jquery Mobile, which falls Into 
the latter category. 

iQuery mobile also has an excel lent 
resource, ThemeRoller, for creating 
aesthetic tr eatments for your mobile 
sites. This works really well If you're 
using the standard user controls. Don't 
be afraid to think outside the box 
though - it often pays to be original 
with user interface. 



041 } 

042 return {inp; 
043 } 

044 7> 


Create an invitation 

We're going to allow users to invite their friends 
to view their location on a map. To do this well 
create another page and form, this time asking a 
logged-in user to enter the email address of the friend 
with whom they want to share their location. We'll use 
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this to generate an email to the friend, inviting them to 
accept the offer. 

001 <Jdcietype html> 

002 <html> 

003 <head> 

004 <meta char5et=”inT-8 s '> 

005 <title>Friend Finder - Invite</title> 

006 </head> 

007 <body> 

008 <7php 

009 if (isset($_FOST['email']) && 

is5et(t_ 

P0ST['nai*e h ]» { 

010 // The form has been submitted, so 

let's check the details 

011 

012 Semail = cleaninput($_POST[ 4 email r ])j 

// Clean the email address 

013 Inane = cleaninput(IJPOST['name']); 

// Clean the email address 

014 

015 $db = mysql.connectCMocalhost”, 
44 friendfinder", 44 dbpassv«}rd”) or die (“ERROR: 
unable to connect to the database server,"); 
016 mysql_select_db( cc frLendf inder” r $db) 
or die(“ERROR; unable to connect to the 
database."); 

017 // $sql - 44 ,. 

018 // Sresult = mysql_query(Ssql) or 
die ( 44 ERROR: unable to query the database. 

<! — 

019// iDysql_close(); 

020 } else { 

021 ?> 

022 <forn action-'invite.php" 
method="post”> 

023 <label>Friend's Email <input 

type=”text” name=”email” 

placeholder=”Friend’s 
Email address" /></label> 

024 <label>Friend r s Name <input 

type=”text” nane=”name” placeholder^ ri end's 

Name” /x/label> 

025 <label>&nbsp; <input type= ff submit” 

value=”Invite to share your location" /></ 
label> 

026 </forn£> 

027 <?php } ?> 

028 </body> 

</html> 

<7php 

029 function cleaninput(Sinp) { 

030 // This function cleans out any bad 

strings before insert to database 
031 if(is_array(linp)) 

032 return array_map(_METHOD_, Sinp); 



033 if(lempty(linp) is_string($inp)) { 
034 return str_replace(array( i W, w \8”, 
44 \n", "\r* t iitn t *"*, 44 \xla"), arrayt'WW, 
*U0\ *Un\ H \\r\ *\V W , 4 \\ B, P 4 \\Z') P 
Sinp); 

@35 } 

036 return $inp; 

037 } 

038 7 > 

12 Store pending invitations 

For security, we can’t rely on passing the user 
and friend details through a URL. Instead, we’ll create 
another table for pending Invitations and send an email 
that uses the primary key in the accept address to 
abstract the user’s details, Create a table to store the 
friend’s details, then check to see if the friend already 
exists before sending an email to invite them. 

001 CREATE TABLE 'friendfinder*.'invitations' ( 
002 'inviteid' INT NOT NULL AUTO_INCREMENT 
003 'userid' INT NOT NULL r 
004 ^name' VaRCHAR( 255 ) NOT NULL , 

005 'email' VARCHAR{ 255 ) NOT NULL , 

006 'approved v INT NOT NULL , 

007 PRIMARY KEY ( 'inviteid' ) 

008 ) ENGINE = MY I SAM ; 


13 Handle invites to non-users 


^ f a friend receives an invite before they’ve 
created a user account, we need to invite them to 
create an account before they can accept the invitation. 
To do this, we ll redirect them to our register form, 
pre-fiiling their email address and name from the 
pending invitation table, 


Test 


■ v N'ow we’ve got our complete set of server-side 
scripts set up. we need to thoroughly test the 
functionality. To do this you're going to need to create 


several accounts, with different email accounts, and 
invite different 'friends’ to check the emails work. Make 
sure the database records are setup accordingly. 


15 Make it pretty 


Th e chances are that visitors to our site will be 
accessing from a mobile device, especially once weVe 
added the geolocation positioning in next month's 
concluding part. Add some basic CSS to give your 
pages a smartphone orientated design. Make use of @ 
media queries to change the design to fit the screen 
size of the device accessing the page. 
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| Builcl an HTML5 friend-finding apjp: part 1 



jQuery mobile 

The main application, once a user has signed up 
and invited friends to view their location, will consist of 
an interactive map that shows the device's current 
location, and super-imposes the position of local friends 
onto the map. To make this easier well use jQuery 
mobile, found al www.iquervmobile.com 



17 Create the skeleton 

The final thing we need to do (before moving on 
to the client-side script next month) is to create the 
skeleton [Query mobile page that will hold all our user 
interaction with the map. Create a new page using the 
code shown, and save it as 'friend-finder.htmr. Make 
sure you've included the jQuery libraries. 




Code library 

Register your users 

Our app will make use of user records to let friends share their location 
with each other. First they need to register an account. Full code on disc 


This section of PHP 
code checks to see If 
the form has been 
submitted, and If it 
has, it cleans up the 
Input and creates a 
user record within 
the database. 


We store the 
password with an 
MD5 hash. This 
means the password 
Isn't plain tent any 
more, and provides 
additional security 
for our users. 


Our form makes use 
ofthenewHTMLS 
input type email to 
allow for browser-led 
validation, ttalso 
means that on mobile 
devices the 
sof t-keyboard will be 
Specific lo t he data 
type being entered. 


001 c’doctype html> 

■002 <html5- 
003 <head> 

004 <meta charset=”IJTF-8 r > 

005 <title>FrierK] Finder - Create An Accountstitle> 

006 <link rel="stylesheet" href=''styles/screen.cs5” type-’text/ 

css" O 
007 </head> 

008 <body> 

009 <?php 

010 if (isset($_FOST[ f firstname']) && issetltJ^OSTL"surname 1 ]) 

&& isset(S_P0ST['email’]) && isset($_PDST['password'])) { 

011 // The form has been submitted, so let's create the 

account in the database 

012 

013 $firstname = cleaninput($_PQ5T[‘firstname 1 ]); // Clean 
the first name 

014 Ssurname = cleaninput ($_P05T[*surname’]); // Clean the 
last name 

015 Setmail = cleaninput(S_POST[‘email’]); // Clean the email 
address 

016 Spassword = md5($LP0ST['password’]); // Password has 
been MD5 hashed 

017 

016 Sdb = mysql_oonnect("localhost”, “friendfinder”, 

“dbpassword") or die(“ERROR: unable to connect to the database 
server,"); 

019 mysql_select_db("friendfinder" r $db) or die("ERROR: 

unable to connect to the database."); 

020 

021 Ssql = “INSERT INTO users (firstname, surname, email, 
pa ssword) VALUES ( H tfirstname', r $su rname ? , r $ema i 1 * / $password ')"; 
022 {result - myaql_query($sql) or die (“ERROR: unable to 
query the database, $sql,”—>>'); 

023 inysql_closeO; 

024 

025 > else { 

026 7> 

027 <form actionp'Tegister.php” method="post”> 

028 <label>Firstname <input type="text’' name="firstname" 

placeholder=”First name” /Xspan>Enter your first name</spanx/ 
label> 

029 <label>Surname <input type-’text" name-’lastname" 

placeholder=”Last name" /Xspan^Enter ycur family narne</spanx/ 
label> 

030 <label>Emai1 cinput type="text" name=”email” 

placeholder=”Email address" /xspan>Enter valid address</spanx/ 
label> 

031 <label>Password <input type=''password" name="password” 

/Xspan^Miniimm 6 characters</sparix/label> 

032 clabel^Snbsp; <input type=”submit" valueF"Register with 

Friend Finder” /X/Iabel> 

033 </form> 

034 <?php } 7> 


72 


tutorials 



























Design for a better web 



hobbyists and professionals 

Back issues 

isl K4H l- u- Ej-mxl-ix- TO? 

• siiis.isi desraner P.vf 


itufinln; wrtiiw 


<rsaf'«9 sl 


DVDs 


Web Desert: From Desktop 
to Dotcom eMag Vd, 1 

A visual fcuide to Flash. 
Dreamweaver and Photoshop. 
256 pages of waUdhraughs 
nr one disc* A project-based 
workout lor a ny webshngflf I 
Master tools, receive technical 
advice and read inspirational 
features. 

£4,99 


mm 


BWeb Design Vol. 6 

Creative gutfes ror designing 
next’gen websites, in-depth 
features to bring you up 
to spaed or all the hottest 
technologies. Step-by-step 
tutorials showing you how¬ 
to design amazing website! 
using CSS3.HTML5. Flash. 
Photoshop and more 
£14.99 


Web Des^n VbL5 

Tiusbook provides a 
comprehensive collection ot 
visual lessons on t he es-senl iai 
techniques needed to create 
awe -i rre paring websites. 

£6.49 with code "DOTCOM" 


Web Desigpcr eMag Vo|. 1 

Enjoy 21 isswsof Web 
Designer on one interactive 
drsc. Over 1800 pages 
of expert tutorials, case 
studies & features, Plus 
bon us tutorial workshop files 
included. 

£9.99 


The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, the The Web Design Book Vol. 1 will 
give you a tour of the latest developments in 
web design and show you how to use these new 
tools to create a truly or igi nal s ite. 

£14.99 


Web Designer eMag Vol. 2 

A complete archiveofweb 
Designer magazin e issues 137- 
MS. Over 824 pages of cutting- 
edge trends and techniques! 
Free - 25G page Web Design 
Vof. 03 boefc.azine included In 
pdt format. 

£9.99 


Order online 


die&gnerf 


Become an ImagineShop 
customer and leave reviews of 
your favourite products. 


Add creativity and flair to your online projects 
with an essential range of training products for 


& @imagineshopuk 


G /imagineshopuk 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 


















<lutorial£> 


Need an Inspirational site dlssected7Q webdesigner@lniaglne-publishing.co.uk 



Get creative with CSS 
transitions 



INSPIRATION 


Lovingly crafted 
rollovers 


inspiration iulie nrenvoy e.com 


The main portfolio consists of some 
large thumbnail images of the projects. 
These thumbnails have been given a 



Note 


presented to the user, rather than just 
loading In one element at a time. This 
gives the website a lovingly crafted 
feel and the impression that Renvoye 
pays dose attention to the minor 
details that make a project successful, 
The layout is clean and clea re¬ 
presented with a nice info 
graphic at the end of the 
page that shows 
Renvoye's location and 
areas of expertise. 


m Link to top 


As you scroll down the page you 
become aware of a button appearing 
which is anchored to the bottom 
right-hand corner. This button is a 
quick link back to the lop of the 
page, and the menu for the site. Little 
touches like this help to make the 


custom shape. In order to alleviate much 
Photoshop frustration, the thumbnail is a 
regular square image with a mask placed 
over the top. This is simply a transparent 
PNG on which the edge is the same 
colour as the background. When you roll 
over the images, the mask uses a CSS 
transform to scale it slightly. This allows 
you to see a little more of the 
thumbnail image below. A great 
touch that highlights a clever use 
of transitions. 


THINGS YOU 

SHOULD 
KNOW SPT 


SAN C l EGO 


Presentation 
Each element of the 
design animates into 
position using CS53 
transitions. This gives 
the feeling of presenting 
the site as opposed to it 
Just loading. 


Infographic 
The bottom of the 
page shows the many 
skills that the designer 
and illustrator has so 
that peop le know 
exactly what his area 
of expertise Is 


Thumbnails 

The portfolio thumbnails 
appear one ata time by fading 
i n, They appea r from a central 
position on the page, then 
zoom out to their fina I 
position, giving them real 
Impact as they arrive. 


Image masks 

The portfolio thumbnails 
are cleverly created, with 
image masks over the fop 
of the thumbnail images 
to give them that un [quo 
and distinct shape that 
makes them stand out. 


Rollovers 

The thumbnail images 
have a subtle rollover 
effect created using CSS3 
transitions. The mask over 
the top of the thumbnail 
gets slightly larger., 
allowing the user to see 
more of the portfolio 
thumbnail image. 


;;;;;; i:;:;:;:;: hen you first load the 
P a 9 e to Julien 
Renvoye's portfolio you 

»+»*»*«- s + a + s i + b*m+ viviv 

:::::::::::: are met with a blank 

SSgjj: screen and loading bar. 

What follows is the kind 
of motion graphic 
animation that became 
associated with the best sites created 
In Flash. The page builds up by each 
element using a series of CSS 
transitions that allow the page to be 


Preloader 

The site uses a proloader, 

which is the orange bar 
along the top-edge of the 
site. This shows the 
loading before showing 
the actual site and 
starting th e an f matten, 
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Get creative with CSS transitions | 



^comment* 


Whafiour 

experts, think 
oftheslte I 


One page portfolio 

"J Li lien Renvoyes portfolio site is just a single page to hold the content with 
the actual content being shown on new pages. The idea of presenting your 
portfolio content on the homepage is good because it presents the user with 
the relevant content as soon as the page toads." 

Mark Shuffle bottom 



technique 


Rollover CSS mask transitions 


01 Set up the document 

Creates new HTML document In Dreamweaver 



Add the mask 

We now add tiie mask CSS code. Notice the 


and add the following code to the document, We are 
going to recreate the scaling mask rollover effect using 
CSS3 transitions. This sets up an unordered list with a 
container div that holds the mask div, and the image div 
that holds the image to be masked out. 

001 <ul class= fl thumb M xli> 

002 <a href'"# ri > 

003 <div class= JJ thumbContainer"> 

004 <div class= JJ mask H x/div> 

005 <img src=' f images/thutnb01. jpg M /> 

006 </divx/a> 

007 </lix/ul> 

02 Style the document 

In the head section of the IITML document add 
the following code to create the CSS styles. Here we set 
the background colour of the document. The next line 


transition time, this is fast so that it is responsive to the 
user. When the rollover is called it will be done at this 
speed. The image itself is a transparent PNG shape. The 
centre of the PNG is cut out so that the image 
underneath can be seen through it. The z-index is made 
to the highest on the page. 

001 .mask { 

002 -webkit-transition: all 0.3s ease; 
003 position: absolute; 

004 background: url(images/thumbMask. 

png) no-repeat center; 

005 left: 0; 

006 top; 0; 

007 width; 273px; 

008 height: 293px; 

009 z-index: 999; 

010 } 


gives us the transition effect, using the scale property to 
increase the size slightly, Notice that we have only 
Included one browser prefix here for brevity in the code. 

001 body {background: #202024;} 

002 ul.thumb li:hover .mask { 

003 -webkit-t ransform: scale(1.1); 

004 } 


03 Style the container 


^ we apd the CSS code new for the container, 
which holds both the mask and the image. This is set to 
a specific width and height in order to keep the mask 
and the image aligned at all times. The overflow is set to 
hidden to stop any nasty movement when the mask is 
increased In size on rollover. Here we'vs set autoplay to 
false and told the slide links to open In a blank window 
so that the main page stays open behind it. The last 
option is the actual portfolio slides that will be shown in 
the background. 


001 . thumbContairier 
002 { 

003 width: 273px; 

004 height: 293px; 

@05 display: block; 
006 overflow: hidden; 
007 } 


os Add the thumbnail 


~ * Finally we add the thumbnail image, which Is 
positioned two pixels smaller and one pixel in from the 
left and top so it can’t be seen at the edge of the mask, 
Note that the z-mdex of this div is set lower than the 
mask so that this is always behind the mask on the 
page. Save the document and test this out in your 
browser to see the transitions. 


001 

,thumbContainer 

img { 

002 

position; absolute; 

003 

left: lpx; 


004 

top; lpx; 


005 

width: 271px; 


006 

height: 291px; 


007 

2-index: 990; 

} 

008 

</style> 




Creating a mask saves 
you having to apply 
complicated shapes 
to every thumbnail 
that you create. 
Instead, create one 
sha pe of mask and 
□ pp ly this to every 
image incode. 



TECHNIQUE 

Creating the mask 


To create the rollover effect we need a mask 
that will cover our content, so to make this 
we need to fire up Photoshop to start 
creating an image that has areas of 
transparency. This will enable us to see 
through it to the thumbnail image below. 



Make the image with a transparent 


background then click okay to create it. Add 
a new layer and fill it completely with the 
same colour as youVe used In the 
background of your web page. 



Use the vector shape tool. «t comes 
in a variety off shapes and there are custom 
shapes as well. Select an appropriate shape 
and draw this within the document. Now go 
to Layer>Rasterlze>Choose Layer. 



Selectand delete 

Go to 5elect>Load Selection end click 
OK in the pop up window. Turn off this 
shape layer and choose the filled layer from 
step 1. Hit the delete key to remove the 
shape from the layer. Finally save the image 
as a transparent PNG image. 
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Need an inspirational site dissected?0 webdesianer@iniagine-publishinig.co.uic 



Mainstream 
banner styles 

inspiration www.theworldwelivein.co.uk. 

www.qeorqebadea.com. 

www.malaqa-creation.com/#aqence 


:::::::::: o doubt you've spotted 

|||||s|:||L :::::: examples of corner 

ribbons, small ribbon 
badgesandlogobanner 
"IlllljlH navigation bars around 
” -- ;j -i ” the web. They're not new, 

but the bevy of examples 
make these trends 
mainstream. But what are the reasons behind this 
newfound popularity? Many examples can be 
seen In portfolio, one-page and 'coming soon' 
website designs. Their application seems a direct 
response to presenting work over a host of 
devices, including smartphones and touch, tablets. 

A smaller screen space usually prompts more 
white space Therefore standing elements need to 
be straightforward in build, yet sophisticated in 
style, which many banner examples are. Drop 
shadows, embossed and texture effects, 
illustrated elements, and rich gradients all add 


something. Photoshop CS6, with its latest Shape 
tool options makes the creation of banners and 
the like much easier Ul designers can now apply 
many visual effects from one location. 

The Photoshop CS6 Shape tool options offer 
users the abili ty to add solid and gradient colour, 
and importantly, styled border effects through 
Stroke settings, Here you can apply another 
popular technique used in modern web design at 
the moment, creating a stitch effect - up until now 
this has been a drawn out manual process. 

Furthermore, these latest Shape tools are now 
wholly vector-based. This means that resizing 
assets for use across multiple devices and multiple 
resolutions can be done freely. Pixelation and the 
use of Smart Objects to control asset delineation 
is no longer necessary Here we show you the 
ways to create said assets with these new CSS 
tools and others that can be Implemented to 
improve your banner creations. 



What our 
experts mink 
of tiie site 


Importing vectors with Photoshop CS6 

“Those who create in Illustrator and apply effects in Photoshop will be 
pleased to know the two are more allied than ever. When pasting 
vectors into Photoshop you no longer have to force resolution, 
pasting into a designated selection space. Photoshop CSS now pastes 
vector shapes from Illustrator that always align to the pixel boundary." 

Adam Smith 



WHAT I DO 

In EDdiy'icDmpetiliw online linikip. ifi vital that your brand Imip it original, un ique 



TECHNIQUE 


Create a 
web ribbon 


We're seeing more and more tangibly 
textured web elements, but carbon and 
gloss effects still ring true with many digital 
designers. So here were offering up an 
opportunity for everyone who loves web 
20 styles to see how you apply these to 
your web ribbons. 

Creating these isn't all that hard, utilising 
the power of Photoshop Laver Styles and 
the Gradient tool. Follow these three easy 
steps to discover how to apply these. 



0] Masking your shape 

Create a light grey rectangle using 
the Rectangle Shape tool. Using guides, 
make a selection with the Rectangle 
Marquee tool, holding Shift for 45-degree 
angles. Apply 3 layer mask to this selection, 
activate the mask, and invert it (Cmd/CtrN). 


Layer Style effects 

Open your Layer styles dialogue 
and apply Gradient Overlay - gradient 
style Silver - from the Metals presets. Set 
Opacity at 75 %. Apply a saturated blue 
colour with Color Overlay, setting Blend 
Mode to Screen, and Opacity at 35 %. 


03 Apply gradient 

Cmd/Ctrl-clIck your shape layer 
Vector mask, Select the Elliptical 
Marquee tool, and holding Alt, apply to 
create a concave selection. Apply a 
White to Transparent style Gradient tool 
to this, and Drop Shadow settings. 
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Mainstream banner styles | 


wot * CONTACT 


- Supplement 
ribbons 

Here you can see how 
web ribbons have 
been applied to 
reinforce the cha racter 
of this personal 
one-page website, 
displaying the 
des igner's age. 



Cir cular logo 

The effects shown here 
a re contemporary again 
reflecting the designer’s 
portfolio, Stitches and 
drop shadows have 
been applied to the 
main logo to add depth, 
and a sense of the 
tangible,as is 
- fashionable at present 



Alternate looks 

In each case presented the banners 
are anchored by a strong circular 
logo. However, the re are many other 
examples of banners that go down a 
more radical design route. Much like 
www.D3doLCom.nl with its floating 
interface, or using the triangular 
shapes seen at tekkuafor.de. 


K- tlOC M-. CONTACT 


Welcome 

to our one-man design sti 

We craft clean Ky j web experiences, 
that wc A y devices. 


tdio! 


- Type and colour 

Perfect balance 

1 

Less is more 

The carbon effects here 

Here the designer^ 

This website has the 

aren’t only heightened 

logo sits central to the 

same creative harmony 

by the texture appl kid 

option bar, creatin g 

as. before. However, 

to the options bar, but 

symmetry with the 

here the embossed 

al m the juxtaposition 

perf ectly spaced and 

11 nes re place defl n able 

of small accents of 

nu m bered options 

options, with the logo 

colour , applied to the 

situated each side. This 

as an anchor to still 

logo graphics and 

strikes up a focal point 

create a sense of a 

creative type. 

and creates a clean. 

banner in the actua 1 

— 

harmonic banner. 

absence of one. 



INSPIRATION 

Embossed effects 


Embossed effects are noticeable with menu bars, but 
now creative web type styles have adopted this 
method. Previous editions of Photoshop required 
manual effects, but CS6 allows you to create them fast 
Doing so is simple. Just choose your font, type out 
using the Type tool then Cmd/Ctrl-click your layer 
selecting Convert to Shape. Now your previous Type 
layer is subjected to the same options as all Shape tool 
elements, from the new Shape options. He re you can 
set a similar colour to your type from the background, 
combining low value Stroke settings and Inner Shadow 
Layer Style settings to create embossed effects. 
Furthermore, these are fully recallable now being vector. 




TECHNIQUE 

Create a wrap 
around ribbon 


We’ll shew you how to work up this asset in a 
matter of minutes using Photoshop CS6 Shape 
tool options, working up stitch and colour 
effects along with drop shadows. 



Apply a Rounded rectangle shape 
with a Radi us of 2px to your i Pad-screen 
sized C720 x 1260) template. Using guides, 
make a selection with the Rectangle 
Marquee tool, holding Shift for 45-degree 
angles. Apply a layer mask to this selection 
and invert this (Cmd/Ctrl+I). 



Create a darker small square with the 
Rectangle toot, place behind your template 
and. holding Cmd/Ctrl, move the bottom- 
corner point up to meet the top-comer 
pcHint at a 40-degree angle. 



shape,, on top and inside the guides of your 
Rounded Rectangle shape- Apply a white 
colour dashed line style from the Stroke 
Options, masking away both ends. Apply an 
Inner Shadow Layer Style and text to achieve 
fortifier effect. 
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A CRASH COURSE IN GIT 



Chances are, if you’ve been browsing 
the latest JavaScript libraries or CSS 
frameworks, or even just checking 
out demos of cool techniques 
created by other developers, you’ll 
have seen a link to a page on GitHub 






I ncreasingly, if you want to collaborate with 
other web developers on any kind of project, 
GitHub is where you'll go. 

GitHub, at its core, is an online host of Git 
repositories. What's Git, you ask? Git is a 
revision control system (also called a source 
code management, or version control 
system), if youve ever found yourself 
working on a site and had a number of folders, each 
named mysiteversionl mysite_version2, and soon, 
you've inadvertently created your own revision 
control system, albeit a very inefficient one. 

Using Git (or any other revision control system) 
allows you a far greater degree of control over those 
revisions, and it also greatly facilitates collaboration 
between different developers (often in different 
locations) working on the same project. 

Let's look at a few situations where revision 
control comes in really handy. Let's say you have a 
website, and you want to experiment with a different 
layout. Because this will involve rewriting big chunks 
of your CSS, you r d normally have a few options: 
create an entirely separate copy of the website in a 



Getting started 

Before we can grab a project on GitHub and start 
contributing to it, we'll need to learn a bit about how Git 
works independently of GitHub. 

First things first that means installing Git. Head over 
to qit-scm.com/downloads and follow the instructions 
for your platform otf choice. 

For all the examples in this article, we’ll be working 
with Git from the command line. On Linux and Mac. 
this will be your built-in terminal application. On 
W'ndows.use the Git Bash application provided by the 
Git installer 

Configuring Git 

Before we start, we have a few quick configuration 
steps to go through, Git not only stores a record of the 
changes made to a project, but a record of who made 
those changes. For this to work properly, we first need 
to tel; Git who we are. 

Open up your terminal (or the Git Bash program if 
you happen to be using W.ndows), and run the 


separate folder, or perhaps just comment out all your 
existing layout CSS temporarily. 

Both of these approaches have significant 
drawbacks: in the first case, you might wind up making 
changes to other aspects of the CSS (say, fonts or 
colours) in tine primary (live) version of your site, which 
you'd lose if you simply copied your alternate layout 
CSS over the top of it when you were done. In the 
second case, you'd actually be unable to make changes 
to your current layout until you were done with the new 
one, since they both live in the same file. 

It only gets worse if you're working on a team: 
another developer may have made changes to the 
main CSS file, unbeknown to you. which you'd then 
accidentally squash when you copy in your updated 
version of the file. Messy. 

Revision control solves these issues and makes it 
easy to combine different changes made to the same 
files (even when those changes are made in parallel by 
multiple developers), experiment with alternate versions 
of your code while retaining the ability to switch back to 
the primary version painlessly, and keep a complete log 
of all the changes you’ve made. 


following two commands, using your own name and 
ernait address: 

001 git config --global user.name “Louis 
Simoneau” 

002 git config --global user.email "louis@ 
flippa.com” 

Wow you're ready to start using Git! 

Repositories 

A collection of files living in a directory and managed 
by Git is called a repository. Whenever you’re working 
with Git you'll be working in a repository, whether it's 
one you've created or one you've copied from GitHub. 
This could be all the code fora website, ora particular 
JavaScript library, or anything you can think of, really. 

Let's create a simple Git repository that we can use 
to learn all of Git's basic commands. 

Create an empty directory, and then navigateto it tn 
your terminal. Windows users can nght-dickon the 



directory and select the Git Bash option to open a new 
Git terminal in that directory. For these examples, we’ll 
create a directory called hello.git. 

The most basic G it com ma nd, and the one you 11 
likely find yourself using the most often, is: 

001 git status 

Thu will give you information about the status of the 
current repository. Go ahead and try it out in the new 
hello gil director/; type git status and hit Enter. 

001 £ git status 

002 fatal: Not a git repository (or any of the 
parent directories) 

Whoops! Gu r new directory isn't a Git repository (yet), 
so Git is complaining mat it can't tel us the status. 

Fortunately, turning our newly-created directory into 
a Git repository couldn't be easier. Simply type git init 
and press Enter 


feature_83 





A CRASH COURSE IN GIT 


0©1 $ git init 

002 Initialized empty Git repository in c :/ 
Users/Louis/hello_gi tf.gitf 

If you're using the Git Bash terminal on Windows, you'll 
now see the word master in parentheses at the end of 
your command prompt This refers to the current 
branch your repository is on. but don't worry about 
that for now. We are going to discuss branches in more 
detail later on. 

Now that your directory is a Git repository, try 
running git status again, and this time you’ll be 
rewarded with a bit more information: 

001 £ git status 
002 # On branch master 
003 # 

004 if Initial commit 
005 X 

006 nothing to commit (create/copy files and 
use "git add” to track) 

The key bit there is nothing to commit. This is Git's way 
of telling us that there's nothing new in the directory 
for it to track (in fact, there's nothing at all in the 
directory, but the message would be the same if 
nothing had changed). 


a file in your editor of choice and save it inside the 
hello_git directory. 

Lets say we created a file called hello.txt with the 
contents Hello, Git!. Now. when we run git status again, 
it notices our new file and lists it in a section called 
Untracked files; 

001 S git status 
002 # On branch master 
003 # 

004 # Initial commit 
005 fl 

006 fl Untracked files: 

007 # (use “git add <file>..." to include in 
what will be committed) 

008 # 

009 # hello.txt 

010 nothing added to commit but untracked 

files present (use "git add" to track) 

On the last line of code above. Git is informing us that 
there's nothing to commit, even though we've added 
a new file. This is because Git won't track every file in 
the directory by default; it is up to us to tell it which 
files to track. As the output above states, we are going 
to need to use the git add command to tell Git to track 
our file. 





Commits 

The basic unit of change that Git deals with is a commit. 
Your basic workflow when working with Git will involve 
making changes to one or more files, then committing 
those changes to Git. This creates a new commit, with a 
unique identifier that allows you to access it later on (for 
example, to return your repository to the state it was in 
at that commit). 

Lets create the first commit for our helio_git 
repository. Create a file in the directory with some text 
in. If you're familiar with command-line editors like Vim 
or nano you can use those, but otherwise simply create 
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Creating a commit involves two steps: first, stage the 
files you want to commit to the staging area, and 
second. commit them. 

To stage files for a commit, go ahead and use the git 
add command: 

001 git add hello.txt 

This produces no output but you can simply run git 
status again to verify that it worked. Now you'll see the 
hello.txt file in the changes to be committed section. 

Now that the file is staged, we want to commit them. 
Each commit In Git is accompanied by a message 
explaining what changes 4 contains. To add the 
message, include it in quotes after the -m flag, like so : 

001 git commit "initial commit, added the 
hello.txt file" 

This produces the following output; 

001 $ git commit -m “initial commit, added the 
hello.txt file" 

002 [master (root-commit} 4f73b9S] initial 
commit,, added the hello.txt file 
003 1 files changed, 1 insertions^), 0 
deletions(-) 

004 create mode 103644 hello.txt 

Git provides a brief description of all the changes that 
are contained in this new commit, like how many files 
were changed, and how many lines of code were 
inserted and deleted. 

At any time in a Git repository, you can see a history 
of all the commits leading up to your current state by 
running the git log command. At the moment, our 
repository only has one commit, so running git log only 
shows us that commit: 

001 S git log 

002 commit 4f73b9S9922b0ec6e52a209b95cbd99c9f 
2885Se 

003 Author: Louis Simoneau <louis^!flippa-com> 
004 Date: Sat Jul 14 13:57:02 2012 +1000 

005 initial commit, added the hello.txt file 

Git uses long alphanumeric strings to uniquely identify 
each commit, ours is 

4f73b969922b0ec6e52S209b95cbd99c9f2BS58e 
(The hash will be different on your machine.) You can 
see a shortened version of this string (containing only 
the first few characters) in the output from the git 
commit command. 

You can use the gif show command to display all the 
changes made in a given commit by providing its 
identifier (the short version works fine here too): 

001 S git show 4f73b989922b'0ec6e52S209b95dbd99 
c9f28858e 
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002 commit 4f73b989922b0ec6e528209b95cbd99c9f 
?&858e 

003 Author: Louis Simoneau <louis@flippa,cotin> 
004 Date: Sat Jul 14 13:57:02 2012 +1000 

005 

006 initial commit, added the hello.txt 
file 

007 

003 diff —git a/hello.txt b/hello.txt 

009 new file mode 100644 

010 index 0000000 ..670a245 

011 — /dev/null 

012 +++ b/hello, txt 

013 m -0 r 0 +1 @@ 

014 +Hello ? Git! 

Lines preceded with a plus symbol (+) were added in 
this commit Lines preceded by a minus 0 were deleted 
(our example commit only has one line added, and 
none removed), if you make changes to a line. Git will 
show you the old version of the line as deleted and the 
new version as added, so you can easily compare both 
versions to see the changes. 

That's all there is to committing changes to a Git 
repository; we edit some files, add them to the staging 
area with git add filename*, then commit them with git 
commit -m "commit message* - . 

Then, at any time, you can review the history of your 
changes with git log. or review the changes made in a 
specific commit with git show ^commit*. 

Branching and merging 

So far weVe only seen the simplest features of Git 
adding files to a repository and committing changes. If 
that's all Git was capable of, it probably wouldn't be 
worth using. Now it's time to look at Gifs real killer 
features: branching and merging. 

Git branches allow you to have several versions of 
your project side-by-side. For example, if you’re working 
on an experimental feature, you can do all that work on 
a branch. If you discover a bug in your application that 
needs fixing urgently you can simply save your work 
on the experimental branch by committing it, switch 
back to the main branch, commit your fixes there, and 
deploy the fixed code. When you switch back to your 
experimental branch, all your work will still be there. 

When you're done working on your new feature, you 
merge that branch back into the main branch. Git will 
automatically combine the changes made on each 
branch for you. If there are conflicts - if, for example, 
you made different changes to the same line of the 
same file in both branches - you can pick which change 
you want to keep. 

As we noticed earlier, our Git repository is currently 
on the master branch: this is the default primary branch 
for any repository To switch between branches, you 
use the git checkout command, followed by the name 
of the branch you want to check out. 

Let's create a new branch in the hello_git repository. 
To do this, we pass the -b flag to git checkout: 



jpdategh pogcs 


GitHuCs desktop applications provide a nice visual Interface for working wltn branches 


001 $ git checkout -b test_branch 

002 Switched to a new branch test.branch 1 


The new branch will inherit all the commits of the 
branch you're on up to this point. Think of it like a real 
branch on a tree, where the bottom of the trunk is 
the first commit. The new branch will have ail the 
history down to the bottom of the tree, but any new 
commits on the master branch (known as the trunk) 
won't be visible on the branch, and vice versa. So if you 
type git log at this point you'll still be able to see your 
initial commit. 

To verify that you're on the new branch, you can 
either type git status again, or use the git branch 
command, git branch will give you a list of all the 
branches of your repository: 

001 $ git branch 
002 master 
003 * test_branch 


001 S git add goodbye.txt 

002 S git ccrnmit - m “add goodbye message'' 

003 [test.branch lel2B5e] add goodbye message 
004 1 files changed, 1 insertions(+)., 0 
deletions(-) 

005 create mode 100644 goodbye.txt 
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Now let's make some changes on our new branch. 
Create a new file, called goodbye.txt. with a line of text 
in it and commit it 


Verify that your new commit is there using git log, then 
switch back to master by typing: 

001 git checkout master 
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After p ustiirig our changes* thevH be vlsl ble on GitHub 


At this ooini. if vou insert the directory, you'll note that 
goodbye.txt is nowhere to be found. That's normal; it's 
tucked away on the test_branch branch. If you want, 
you can switch back and forth from master to test, 
branch to see the file appear and disappear. The same 
thing would be happening to the contents of your files 
if you had changes to them on a branch. When you 
check out a branch, the files on disk will be changed to 
match the latest commit on that branch. 

Let's say that we're satisfied with the new feature on 
test_branch, and we want to incorporate it into the 
project. We want to merge the test .branch branch into 
the master branch. 

Make sure you have master checked out. then type: 
001 git merge testjaranch 

Now all your changes to test_branch will be brought 
over into master. You can verify that ftiis is the case with 
git log; 

001 $ git log 

00 2 commit 1e1285eS96491b77579S7f m 1682a176 L3d 
5f74d 

003 Author: Louis Simoneau <louis@flippa.com> 
004 Date: Sun Jul 15 11:46:52 2012 +1000 
005 add goodbye message 

006 

007 commit 4f73b983922b0ec$e52s?09b95cW99c9f 
28858e 

008 Author; Louis Simoneau <louis@flippa.com> 
009 Date: Sat Jul 14 13:57:02 2012 +1000 
010 

011 initial commit, added the hello.txt 
file 

012 

013 Remember; when merging, you should start 
from the branch you want to merge the changes 
into. 

GitHub 

Okay, now that we have learned how to commit and 
review changes* and switch and merge branches, we're 
finally ready to start sharing our code with the world, 
using GitHub. 

We'll first learn how to upload our new repository to 
GitHub and keep it up to date with our changes, and 
then we'll have a quick look at contributing to some of 
the existing projects, 

Head over to githiib.com and sign up for a new 
account if you don't already have one (GitHub is free for 
open-source projects, you only need a paid account if 
you want to keep some of your repositories private). 
Then locate the link to add a new repository (it’s a little 
icon next to your username In the top-right, with a book 
and a plus icon] and click iL Enter in the name for your 
repository (in our case. he!io_git). and submit the form. 

As soon as you've created your repository* GitHub 
helpfully provides a page of instructions for setting up a 
new repository or uploading an existing one. Jump to 


the section titled Existing Git Repo? and follow those 
instructions. After entering the directory where your 
existing repo lives* there are two more steps: git remote 
add and git push -u: 

001 git remote add origin git^github. 
com:rssaddict/hello_git,git 
002 git push -u origin master 

In Git terminology, a remote is a version of your 
repository that's stored elsewhere. This could be on a 
co-worker's machine, on a local server, or somewhere 
on the Internet, in this case, it will be hosted by GitHub. 

The first command, git remote add. is telling Git that 
our repository has a remote* called origin, that lives at 
the provided address (this will be different for your 
project since it contains your GitHub username.) 

The next command, git push, is telling Git to take the 
local commit history on the master branch, and send it 
to the master branch of the remote named origin 
(which is GitHub.) The -u option is only required the first 
time you push your changes to GitHub. 

When you run the git push command, Git will ask 
you for your GitHub username and password. Type 
them in. and your code will be pushed to GitHub. You 
can see it published on the site by refreshing your 
repository page. 

Contributing to an existing project 

Now that you know now to upload your own projects to 
GitHub. it's time to learn how to contribute to other 
people's projects. After all* that's exactly what open 
source is all about! 

Of course* you can't push directly to a project you 
don't own - that would be chaos, However* GitHub 
introduced the concept of forking - making a copy of a 
GitHub repository inside your own account 

To fork a project, just navigate to that project's page 
on GitHub and click the fork button in the top-right 
corner. As an example, let's try forking Modernize Go to 
glthub.com/modernizer/mQdernlzer and dick Fork. 
After a few seconds, you'll land on your own copy of the 
Modernizr repository. 

Now you need to download a copy of the repo to 
your computer bo you can work on iL Copy the URL 
from the box at the top of the page (it will look 


something like nttosJ/github.eom/rssaddict/Modemizr, 
git) . Open your home directory in the terminal* and 
issue the git clone command, passing in the GitHub 
URL you just copied: 

001 git clone https://github.com/rssaddict/ 
Modernizr*git 

This will copy the entire repository to a directory with 
the same name on your machine. You can now make 
changes, commit them, and push them back up to 
GitHub however you like. 

If you make changes that you think would be 
valuable for all users of the project, or fix a bug* you can 
submit a pull request, which invites the owners of the 
repository you forked to incorporate your changes. 
There's a pull request button conveniently located at 
the top of the page when you're viewing any of your 
forked repositories. 

Conclusion 

Now that youve mastered the basics of Gil and GitHub. 
you'll be in a far better position to contribute to 
open-source web projects. Not only can you share your 
own work with others, you'll also be able to help out the 
community by fixing bugs and improving on the work 
of those whoVe come before. 

Extra reading 

This arLide has only skimmed the surface of what's 
possible with GiL and if you want to start using it as part 
of your workflow you'll have a bit more learning to do. 

Here are some of the best places to polish up on 
your Git skills; 

git help: type git help In your terminal to get a list of 
available commands, and git help ^command* to get a 
derailed description of the command and all the 
available options. 

The Git Book: the Git website has an entire book about 
Git, available completely for free online. This is a 
fantastic resource that goes into a lot more detail about 
GiL. qit-scm.com/book. 

Git Immersion; Git Immersion is a fantastic online 
tutorial that walks you through a series of short 
exercises to learn all of Gifs features, from the most 
basic to the more advanced, aitimmersion.com- 
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| Build a URL shortener with Ruby and Sinatra 


Build a URL 
shortener 
with Ruby 
and Sinatra 

Make an impact with your brand and 
start sharing shortened URLs 
generated using your own application 

tools I tecli I tniiuis Code editor command'!ine interface 
expert Matt Gifford 



A s we make our daily dive into the 
world of social media, we see 
shortened URLs at every turn. 
Not only do they provide ljs with 
a quick and easy way to share 
potentially long URLs that are 
prone to being misspelled, they 
can also provide marketing 
benefits if the domain is brand-specific 

in this tutorial we will build our very own URL shortening 
service. The application itself will toe built using Ruby and 
Sinatra - a small yet powerful addition to the programming 
language. Sinatra is a Domain Specific Language CDSU that 
helps us create our application in a RESTful manner by 
defining certain HTTP actions, and then building the 
application to cater for these requests and how it will 
respond to them. Unlike other frameworks such as Rails, 
Sinatra has no concept of separate models, views or 
controllers. Nor doss it have any helper functions to help 
you create forms, links or database connections, Wfrat it 
does offer you, however, is. a simple way to create some 
truly powerful applications. 


01 Install Ruby 

" - The Installation procedure for Ruby is fairly straightforward. Windows 
users benefit from Railsinstalier ( railsin5taller.org) . which will install everything 
with ease thanks to the package. We recommend the Ruby Version Manager 
(RVM) application, available from rvm.io, which allows us to install and switch 
between multiple versions of the language. 



0 2 Install Sinatra 

To ensure we can run Sinatra applications, we need to Install the 
required gems. Open the Terminal window and enter the following code to 
install the Sinatra gem. To assist us during the initial phases of building the 
application we'll also need to install the gem for shotgun, which is a reloading 
development server: 

061 > gen install sinatra 
002 > gen install shotgun 

03 Sinatra template 

Although Sinatra can run an application from a single file, larger 
projects may require specific directory structures. To help us get started, 


download the core template for the project from q Ith ub coim/coldfu mon keh/ 
URL-Shortener-Template or done It using git In the command line. This 
template project has everything we need to build our application. 

001 > git clone git://github.oom/coldfurnonkeh/URL-Shortener- 
Teinplate.git urlshortener 

A First run 

Once weVe downloaded the template project files into your desired 
location, well run the application. We first need to run the bundle command 
to install any required gems that our app needs. Once this has completed, 
we'll run the application using the built-in WEBrick server on port 4567. 

001 > cd urlshortener 
002 > bundle install 
003 > ruby application, rb 

05 Missing route 

Sinatra was kind enough to let us know that we had not added any 
routes for the application, and even gave us a simple example to fix the error. 
Let's add that example route now, as well as a second route, to create another 
page within the application. Restart the WEBrick server to see the results. 

001 get V do 
002 r, Hello World" 

003 end 
004 

005 get J /hello' do 

006 "Vlho shall we say hello to? JF 

007 end 

Using shotgun 

As we saw in the previous step, wo had to restart the server to pick up 
the updated code. This is where we can use shotgun instead, which reloads 
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the code with every request to allow for continuous development. To run 
shotgun, simply run the application from the command line below, which will 
open on port 9393. 

001 > shotgun application.rb 

Sending parameters 

Lets create a third sample route within our application file, so we can 
see how we can pass variables into the URL. thereby creating more of a 
RESTfus approach. This route will accept a parameter in the URL and display it 
directly in the browser. Browse to http://12ZQj0.1:9393/Matt to see. 

001 get J /hello/:name J do 
002 J Hello, 1 + params[:name] 

003 end 


route for the home page in our application. This route checks for the existence 
of a URL parameter called url. If it exists* it will send it through to a new 
method to shrink it. 


001 # root page 
002 get r / r do 
003 

004 if paranis[:url] and not parafis[:url] .empty? 
005 generate_short_url (pa rams [: url]) 

006 else 

007 @urls = ShortURL.all; 

008 erb rindex 

009 end 

010 

011 end 



Build model 


Our URL shortening service application will use an SQLite3 database to 
store the saved URLs. To manage the control and validation of the values we 
will create a model to represent one entity from the database. Create "shorturl. 
rb' in the lib folder and add the following code to complete the model. 


001 class ShortURL 

002 include DataMapper;:Resource 

003 property :short_url, String, key; true, unique-index: true, 
required: true 

004 property :url, Text, required: true 

005 property :created_at f Date!Line 

006 property :updated_at r DateTime 

007 end 


09 Root page 

With our initial data model complete, let's revise the mutes for our 
application. Delete the example routes we added earlier, and add the new 


10 Allow posts 


We want users to be able to shorten a URL not only by sending a 
parameter via the URL and a GET request, trot also by a form POST 
submission. Let's add the revised route below the first, if no submission is 
made, we will display an index file to show the form and current number of 
URLs we have shortened. 


001 post 7 F do 
002 

003 if params[:url] and not paramsL:url].empty? 
004 gene rate_short_u rl(pa rams[:url]) 

005 end 
006 

007 @urls = ShortURL.all; 

008 erb ; index 

009 


010 end 
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Helper methods 

To generate our shortened URL we will use helper methods. Add the 
following function to the helpers code block. This accepts the long URL 
provided by the user, generates the random stnng, saves the information to 
the database using the model and builds the new short URL. which we can 
use for display purposes later. The code for this step is on the coverdisc. 
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Random string 

Our random string for the shortened URL is created by another helper 
method. Add this below the previous entry. This will generate a random string 
value limited to the total length of characters we send through, which in this 
application defaults to five. 

001 def rando*i_s thing (length) 

002 rand(36**length),to_s{36) 

003 end 

Build URL 

Finally, well add our last helper method, which completes the 
functionality to create the short URL, This method will build the revised URL 
link, creating a string that concatenates the site URL from the configuration 
object and the generated random string. Add this below the other helper 
methods in application.^. 

001 def get_site_url(short_url) 

002 SiteConfig.url.base + shortjjrl 

003 end 

Track clicks 

it may be useful to track or record how many times a shortened link, 
has been followed. Create a new model called didttracltrb in the lib directory 
and add the following code, which will validatethe properties for the object 
and help to manage database transactions for us. 

001 class CliCkTrack 

002 include DataMapper: Resource 

003 property :id r Serial, key: true, unique_index: true, 
required: true 

004 property :short_url. String, required: true 

005 property :url, Text, required: true 

006 property :tlicked_at, DateTime 

007 end 


the content type for the response and set the values of the object from our 
model, which has retrieved the data from the database using a getQ method. 



Debug params 

As we have the Terminal or command-Sine interface open during 
I development, we can use this to help us debug and test our application, Add 
the following to the application file. This will output any parameters sent to our 
application in the Terminal window as they are submitted, which is very useful 
for testing expected parameters. The code for this step is on the coverdisc. 

Create form 

Open views/index.erb from the project files. We'll add the form to allow 
users to submit URLs here. We can display the application title, already set in 
the configuration object, as well as the current count of generated URLs. The 
hO method escapes any unwanted HTML from the URL parameter. 

001 <div class-'container^ 

002 

003 <hl><%= SiteConfig.title %X/hl> 

004 <p>Currently serving <%= @urls.count %> shortened 
links</p> 

005 <fonm methods"post"> 

006 <input type-'text" value-'<S p htparans[:url]) %>" 
naiBe=”url" id- J 'url J ' /> 

007 <input type= JI submit'' valuer's hoc ten” id=”sub(iiit" /> 

00S </form> 

009 <div classF"clear jr ></div> 

010 </div> 

View results 

Below tie form ir views/ ndex.ero. let s row add the code to display 
the freshly-created short URL after a successful request. Using a simple if 
statement to check for the existence of the variable, we can set the generated 
value as both the display text and the href attribute for the anchor tag, 

001 <%, If @shortenedURL %> 

002 <div cl ass- 1 'result J '> 

003 Your shortened URL is: 

004 <a href= J, <^ GshortenedLRL %> ,f x%= GshortenedLRL £X/a> 

005 </div> 

006 <% end %> 









View URL 


Create a new route in the application file to allow users to follow a 
generated link. This route allows for two entry points, both with the shortened 
URL in the path. If a matching short URL exists in the database, we’ll log the 
visit in the database using the dick track model before we redirect the user to 
the original long URL. The code for this step is on the coverdisc. 


ftk Expand info 

Create a new route that will allow us to expand a shortened URL via an AP$ 
request to return information about the link as a J5GN object. In this route we set 


20 Create test page 


Create a new file called application_spec.rb in the spec directory. This will 
hold our unit tests for the application, which will help us debug and ensure our 
code works as expected- Add the following code into the test file to set up the 
dependencies and testing processes. Notice that we require the actual 
application file to run the code. 


001 require^relative J ../application.rb' 
002 require ‘rack/test' 
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m3 

004 set environment, rtest 
005 

006 def app 

00 7 Sina tra;: Application 

008 end 

009 

010 describe 'URL Shortening Service 1 do 
011 

012 include Rack: :J est:rMethods 
013 

014 end 


21 Define tests 


Mow wo need to add some tests into the document. Place 
these tests after the Rack include in the tag block. The description of 
each test is cleat informative and written in plain English, which makes 
it ideal for anyone to read and understand what should be happening 
as it runs. 


001 it ‘'should load the home page' 1 do 
002 get '/' 

003 last.response,should be.ok 

004 end 

005 

006 it "'should pass when a short url is viewed directly"' do 
007 get Vjirey' 

008 last^response,should be.ok 

009 end 

010 

011 it "should fail when trying to expand a hash that hasnt 

been sent 1 ' do 

012 get '/expand/" 

013 last.response.should.not be.ok 
014 end 


Mk Running tests 

With our test cases written, we can now run the entire test 
script against our application to make sure everything is up and 
working as it should be. Open the Terminal window and type in the 
code below to run the rspec tests. The output and results will be visible 
in the Terminal. 


001 > rspec spec/applicafion.spec.rb 



Code library 

In detail 


Let's take a closer look at some of the code functions used in this application 


Weusethefirst.or. 
create method on the 
entity only to save the 
record if it doesn't 
already exist 


The site configuration Is 
set in environmentub. 
You can edit or change 
the config object 
proper ties here 


The Gemfile contains a 
list of all gems required 
by the application. 
Runnlngbundle install 
will manage these for us 


001 def gener^te_short_url(long_url) 

002 

003 ©shortcode = random.string 5 
004 

005 su = 3hortURL,first_or_createC 
006 { :url longjurl 

007 { 

008 ;short.url => ^shortcode, 

009 ;created_at => Time,now, 

010 :updated_at => Time.now 

011 }) 

©12 

©13 @shortenedURL = get_site_url(su.short.url) 
©14 

©15 end 

©16 configure do 
©17 

©18 SiteConfig = Gpen5truct.new{ 

©19 : title => 'Sinatra Shortener 1 , 

020 :author => 'Your Name Can Go 

Here', 

©21 :url_base => http:// 

localhost:4567/' # the url of your 

application 
©22 ) 

©23 

©24 # load models 

©25 SLQAD.PATH * un s hift ( 1J #{F ile.di r name (_ 

FILE_)}/lib' 1 ’) 

©26 Dir . glob( " # {F ile * d i rname(_FILE_>}/ 

lib/*,rb”) { 1lib| require File. 
basename(lib, \* J > } 

©27 

©28 DataMapper::setup{:default , 

" sql i te3: / /#{Dl r. pwd}/ shortu rls. db 1H ) 


©29 



©30 

end 


©31 



©32 

source f " htt p: // rubygems. org 1 

©33 

gem 

1 sinatra", '>= 1*2* 

©34 

gem 

1 rake 1 

©35 

gem 

1 datajTHpper J , '>= 1.1" 

©36 

gem 

1 dm-core ’ 

©37 

gem 

1 dm-sqlite-adapter 1 

038 

gem 

‘dm-timestamps 1 

039 

gem 

‘dm-validations r 

040 

gem 

J dm-aggregates J 

©41 

gem 

'dm-migrations J 

042 

gem 

haml 1 

©43 



©44 

group ;test do 

©45 

gem 

'rspec' r -require => 

©46 

gem 

'rack-test' 

©47 

end 
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| An introduction t o the F acebook Graph API 


An 

introduction 
to the 
Facebook 
Graph API 

A powerful API that allows you to 
access the data behind Facebook 

toolasllcc:lilirtMicbt Dreamweaver. PHP. MySQL expert Pete Simmons 



I | n this tutorial well he recreating elements of 
Facebook, under the guise of 'Fakebook 1 . 

This practical demonstration will show you 
how you can access certain elements of the 
Graph API for use on your website. There is 
I no real point to recreating Facebook in Its 
entirety using the graph, as they seem to be 
doing a pretty good job of that themselves! 
This is more a convenient way to show you 
the basics, so you can pick and choose what 
you use for future projects. 

in this tutorial we will cover how to set up a Facebook 
application, how to authenticate a user on your website, 
and how to pull information from the graph to display 
on your website. 

it is worth noting that Facebook has a tendency to 
change API features on a regular basis, so it is worth 
keeping up to date with what is going on. via the 
Developer Roadmap {found at developers-facebook. 
com/roadmapj. Keep a mental note of anything that 
you may have coded for future reference, as you may 
find that your application suddenly stops working for 
no reason. It is unlikely that anything we cover in this 
tutorial will change, as the Facebook graph could be 
considered a core featu-e of the API. 


Set up your application 

Navigate to bit.ly/pquEvy and dick Create New App. In the pop-up 
box, enter a name for your application and an application namespace. The 
namespace cannot contain uppercase letters, numbers or spaces and must 
be unique. Agree to the Facebook terms and conditions and press Submit 

Your APP ID 

You will be taken to your App settings page. At the top of this page you 
will see your Application ID and Application Secret. It is important that you do 
not surface the Application Secret in any way, including via the page source 
code. Make a note of your Application ID. you will need this later. 

Application settings 

On your application settings page, there are a couple of fields that you 
need to fill out with server information - the first is App Domain. Enter the 
domain of your website without the HTTP or WWW; this will authorise all 
subdomains and directories on your server. .Scroll down and elicit the Website 
box and fill in your server details here as well. 

Authenticating a user 

Now we have our application set up, we need to create a way of 
obtaining an access token from Facebook, the Access Token is the key that 
unlocks all sensitive data about a user We'H need to redirect our user to a 
Facebook authentication page and then push them back to our application. 
Copy the code from the disc into a new PHP document. 

Adding app variables 

You'll notice on lines three and four that our code requires our unique 
APP ID and APP Secret. Add these details in from step 2, as well as the domain 
on line five and save your PHP page at i ndex .oh p. Running this page now will 
redirect you to a Facebook authentication page and ask for permissions. Don't 
accept these permissions yet! 


Extended permissions 

The code we used in step 4 is taken from the Facebook 
documentation and only provides us with basic access information. If you had 
allowed access in the previous step, you would now need to delete the 
application from your Facebook and re-add iLToget access to more in-depth 
data, change the Sdiatog.url variable Cline 12? to the following. 

001 $dialog_url = "https://www, facebook, codi/dialqg/oauth?cliefit^ 
id- f . $app_id , '^sccpe-u ser_about_me r use r_act iv i t i es > use r_ 
bi rthday, user_checki ns f user .groups, u ser_inte rests, use r = 

1 ikes , use r_p>hotos h user_status , emai 1 f userJhrtWtGwi&redirect_u r i-'* . 
urlencode($my_url) . Jl listate= J \&_SESSION['state' ]; 

Testing our permissions 

Run your code and dick Go to App when prompted, you should be 
redirected back to the domain you entered on line 5 of your code, you should 
also see a welcome message with your name. You will also have stored an 
access_token in the SparamsE'accessJoken'j variable. Delete the echo 
command outputting your name and add the following code to see available 
user data. 

001 print_r($user); 

Styling our data 

Open the CSS file from the disc and save it to the same folder as your 
project, add the foltowing code above our PHP code. This will allow us to 
quickly style our information and give you a storting point for the layout of 
your project. You'll need to move the session_start to the top of the page. 

001 <? Sessions tart Q; ?> 

002 dDQCTYPE htinl> 

003 <head> 
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004 <title>Facebook Graph AFI</tiUe> 

005 clink href="style.css"' type="text/css 
006 <,/head> 

007 

Displaying basic information 

Now we have everything set lid. it's tine to duI some data aid display 
I it The following code will pull in a user's profile picture, print a welcome 
I message, and then construct a sentence based on their Facebook data. 
Replace your pnnt.r line with the code for this step, which is on the coverdisc. 

Getting users likes 

Now wc'l connect to a different part ot tic Facebook grapi aid co lect 
a list of pages that the user is a fan of. Weil be limiting this list to ten for speed 
reasons, but you can display as many as you like. Add the following code 
underneath our info div. 

001 <div styIe= l 'clear;both‘ , "></div> 

002 <div class-'ll kes Jf x?5 $user->first_name ?> likes</ 

dlv> 

003 <ul> 

004 <? 

005 Hikes = json_decode(f Lle_get_contents( ,J https: //graph, 

facebook. com/me/I i kes ?1i mi t=10&access_token=”.tpa rams[ ' acces s_ 
token']}); 

006 foreach (Slilces->dota as lvalue) { 

00 7 echo 1 <1i> J ,$value->name. 1 </li> 1 ; 

008 > 

009 ?> 

010 </ul> 

Making pages clickable 

We can go one step further with our list of fan pages, by making them 
clickable. To do this we need to know the URL of each page; this information is 
not included in the graph data, but the page SD is. We can simply go to 


facebook.com/fpage_id] and get to where we need to be. Alter your echo 
code to: 

001 echo '<liXa href-'http;//facebook r com/ f r $value->id r 
target- r, blank r '> J . Ivalue->name. J </ax/li> f ; 


Getting interests 

Getting a user's nterests is very sinri ar to getting thei- ikes. Add LIie 
following code underneath the previous step, to show a list of clickable user 
interests. Again these will link through to a fan page based on the page ID. 

001 <div class=‘"interesfs l 'x?- $user->flrst_name ?>'s interests</ 
div> 

002 <ul> 

003 <? 

004 $like$ = json_decodeCfile_get_contents("https://graph, 

fa cebook . com/me/ i n te rests ?1 imi t= 10&ac cess_token= ,p . $pa rams [ ' access_ 
token'])}; 

005 foreach <$likes->data as Svalue) { 

006 echo '<li>'.ivalue->name.'</li>‘; 

007 } 

008 ?> 

009 </ul> 

Adding photo albums 

The next step for us to add a list of photo albums i.hal. the user has 
uploaded. Again we need to connect to a different section of the graph, and 
interpret text data and convert it to a clickable image. This image will in turn 
lead us into the photo album itself. Add this code under the last step. 

001 <div clas s= JI albums" xl= $user->f irst_name ?>'s albums</div> 
002 <? 

003 lalbums = json_decode{file_get_content5C"hftps://graph, 

f a cebook,com/me/albums ?1imlt-G&access Jtoken-',$params["access^ 
token'])}; 
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p*l# Simmorn 


<Lsft> 

W 


-A more friendly liter irn5s&age, 
showing our profile picture and a 



sentence constructed using our data | 


»We're now pulling in 
a user's likes, and 
c licking tnem will 
take you to that page 


<Lelt> 

■ We now iiave the user's latest 
six photo albums. You can 
cha nge Ih Is I imit af you prefer 


<MnW> 

■ Now with addled fa ncyEox, 
Our images open in a lightbox 
overlay complete with captions 



Hetto Pot* Simmon* 


3L, 


• m m ii i i u' 

- w iarh w iu w 


• As before, we new 
have interests displayed 
in a clickable list. This is 
very similar to likes 



004 foreach ($albums->data as Svalue) { 7> 

■065 <div cla$S= "albumcove r JF > 

006 <a href= ''album r php?id=<?= $value->id ?> jr > 

007 cimg src="https://graph.facebook,go«l/<?= $value->id 

?>/pictu re? type=thumbnai1&acces5_token=<?- Spa rams [ J access_token J ] 
?>“ border- 1 ®" /> 

008 </a> 

009 <div clas£f= lf descriptio«n''><?= $value->name ?x/div> 

010 </div> 

011 <? } ?> 


The 

Authentication 
process 

A! the start of this tutorial, 
we pushed our users away 
from our application, on to 
Facebook. More information 
on this process can be 
found at bitJy/J 6 HnhG. 


Exploring albums 

Wc now need to create a new PUP page that wil display all the photos 
in a previously clicked album. Open step14a.php from the disc and save it as 
‘ album.oho' in your project folder. Under the £user variable add the following 
code, this wil pull all thumbnails from an album, and their descriptions. 

001 ?> 

002 <hixa href="'index.php‘">alt;' Back </ax/hl> 

003 <div class="'albums"x/div> 

004 <? 

005 Salbum = json_decode(file_get_contents( >, https :// 

g raph. facebook. cent/". $_GET[" id ’ 3 - J ' / photos?access_ 
token-".$pa rams [ J acces s_token J 3) ); 

006 foraach (&jlbum->data as Svalue) { ?> 

007 <div class= ''albumcover' r > 

008 <img $rc =,, <?= Svalue->picture 1>" border- 1 "0" /> 

009 <div class=" description''><?- $value->name ?x/div> 

010 </div> 

011 <? } 7 > 

012 <1 

15 Adding fancyBox 

The next step is to demonstrate how we can integrate the Facebook 
graph into a thrd-party tool, like fancyBox. Download the source files from 


fancyapps.com/fancybox and add them to the head of your FITML and into 
your project folder. Now all we need to do is wrap our thumbnails around a 
link like so. 

001 <a class-"fancybox” href= J, <7= $value->source 7>" 
rel="gallery" title=''<?- $value->name 7>”> 

002 <iing src =, "<?= $value”>picture ?> w 

border -/> 

003 </a> 

Comments and Likes 

As t stands we currently have the description of the image appearing 
twice. We'll amend our code to show the number of likes and comments 
under each thumbnail, rather than the description. We can do this through the 
following code in our description div. 

001 <d i v cl ass= w descri pt ion J ‘x?= count < Sv a 1 u e->l ikes ->da ta) 

?> Likes <br /> <?= count (Svalue- >coimients->data) ?> 
Comments</ div> 

17 Tldyuperrors 

Vou may notice that if your image has no likes or comments, your 
code will throw up some errors. This happens because the Graph does not 
include certain data if there are no likes or comments. To get around this, 
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change the previous code to include 
some isset it conditions. 

001 <div cl ass=" descript ion J 'x? 
if ( i s s et ( $v alue->1ikes- 
>data)) { echo count($value- 
>likes->data) ; } else { echo 
'0': }?> Likes <br /> <? if 
(isset($value-comments- >data> ) { 
echo count ($value->CGmments- 
>data) ; } else £ echo J 0 J ; }?> 
CQininents</div> 

Display comments 

So we i iove our likes and 
comments text in place under our 
images, now we want to be able to dick 
them and have a fancy Box open with the 
comments, for this we’ll use a hidden 
mime div, Add tins under our albums div. 
Well need to make one more call to the 
■graph using the album ID from our 
previous foreach loop. 

001 <? 

002 Salbum.comments 

= json_decode(file.get. 
contents (" h t tps: / /g raph r foe ebook r 
com/ " r $vglue->id, "V?acces5_ 
token- 1 ", $params['access, 
token'])); 

003 if (isset($album_ 

comiients->comn»ents->data)) £ ?> 
004 <div id="inline" style=" 

display:none;width:S00px; "> 

005 <? foreach (£album_ 

comments->coiTii]ieints->data as 
$value2) ( ?> 

006 <h2>Corments</h2> 

007 <h3><?- $value2- 

>fron->name ?x/h3> 

008 <p 

class=”coititient"><?= $value2- 
>message lx/p> 

009 <? } 1> 

010 </div> 

011 <7 } ?> 

One more error 

There is one -nore emi fiat may 
have passed you by, as it’s hidden in the 
source code, if your picture does not 
have a caption, it will throw up an error. 
Update your img title tag to the following 
to get around this. Add an else statement 
in here to show No Caption if you wish. 

001 title="<? if <Isset(£value- 
>naine)) £ echo lvalue->name; } 

7>" 


Making inlines 
unique 

If you view source on your page, you will 
notice that all of our inline hidden divs 
have the same id. This is a problem if we 
want to display the contents in a 
tencyBox. as each has to be unique, in 
order Loget around this, change the div 
id=1nline" section to the following: 

001 <div id= rt irdir»e_<?= $album- 
>datg->id ?>" 
style="display:none; 
width : 500px; u > 

Clickable comment 
links 

We now need to add links to our album 
page to show the comments, we need to 
account for the fact that our fNines are 
now unique, so don't forget to pass the 
ID into your href. This can be done like 
so. and needs to be placed inside our 
first foreach loop. 

001 <div class="description"^ 

<? if (is£et($value- 

>likes->data)) { echo 

count(tvglue- >likes->data) 

; } else { echo 

"0"; }?> Likes 
<br /> 

<? if (isset($value- 
>camments->data)) { echo 
’ <a class=''fancybox" 
href="#inline. ' . $value->id, . 
count(£value->camnfients- >data), 

" Comnents</a> J ; } 

else £ echo '0 Comments ' ; }?> 

</div> 

Putting faces to 
names 

Adding the following code into our 
second foreach loop will add a user's 
profile picture to our comments box. The 
image displayed will be the Facebook 
square image, meaning we don't have to 
resize anything. If you want to, you can 
also make their name and picture 
clickable as described in Step 11 

001<div class= H profile_pic"'> 

<img src-"'https:// 
graph.facebook.com/<?= 

$valu e2->from->id ?>/ 
picture? type=squa re£acces s _ 
tok-en=<?=Sparams[ "access. 
token'];?>"' align=' J top" /> 

</div> 







Code library 

The Facebook 
authentication process 

Well take a look inside the Facebook authentication process to 
show you what is happening 


The first three lines 
define our application 
settings from Facebook, 
This ensures that the 
application Is only 
accessed from within 
the app domain. 


We then move on lo 
create a session and 
check to see If we already 
have a valid $oode set 


001 $app_id = HJ '; 

002 Sapp.secret = JMJ ; 

003 $my_url = 


004 session_start () ■ 

005 $code = $_REQUE5T["code"]; 


006 if(empty(Scode)) { 

007 ijSESSlON[ 1 state ' ] ~ 

id5(uniqid(randO, TRUE)); //CSRF 
protection 


008 $dialog_url = "https://www. 


If no valid Scode is 
found. Hie PHP will 
output a <script> 
command to redirect the 
user back to Facebook. 


facebook, com/dialog/<rauth?client, 
id=" 

009 . $app_id . J 'Sredirect_uri= JI 

urlencode(S*nry_url) . "Estate- 1 
010 . 3_SESSI0N["state"]; 


011 echQ( J "<script> top.location. 

href=" Jf , $diolog.ur 1 , '</ 

5Cript>"); 

012 } 


013 if($_SESSIQML J state 1 ] S& 

(S_ SESSION ['state"] 

$.REQUESTC'state 1 ))) £ 

014 $token_url = "https;//graph, 
facebook, com/ oau th /access .token ? ” 

015 . "client.iob" . $app_id . 

"&redirect_uri= J ' . u rlencode(3ny_url) 
016 . "&client_secret= l " . Sapp, 

secret . '"&CGde= J " . $code; 


017 Sresponse = file_get_ 

contents(Stoken. url); 

018 Sparans = null; 

019 parse.strCSresponse, 
Sparams); 


020 Sgraph.url - "https://graph, 
facebook. com/ine? 3 cee$s_tqken= J ' 

021 , Sparan^raccess.token"]; 


Once we have our valid 
Scode. thecontenls of 
the graph ar e decoded 
and a welcome message 
is displayed. 


022 Suser = j son.decode(f i1e_get_ 

contents(3graph_u rl)); 

023 echo( J 'Hello J '.$user->name); 

024 > 

025 else £ 

026 echoC'The state does not 

match. You may be a victim of 
CSRF."); 

027 } 
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Championing the talents of 


Robby Leonardi 

web www.rleonardi.com 



Current role Digital media designer 
Education Graduate of communication design, Pratt Institute 
Expertise Photoshop. Illustrator. Flash, HTML. CSS. JavaScript. 
ActionScript 

Clients Fox. Speed TV, FX NeLworks. myNeLworkTV. and G4 
Twitter @rleonardi 


Robby Leonardi is a multidisciplinary 

designer based in New York City, He does 
graphic design, animation, illustration, and 
front-end development. Most of his work is 
online media projects such as banner ads and 
websites, and most of It is for major media 
companies. He got into web design simply 
because he loves to design and to program, 
and he feels there is some sort of excitement 
In combining things that require very different 
thought processes. Sometimes his work takes 
tons of effort, especially when the idea is a kind 
of wild; but when he succeeds In building 
something in to one complete final product., 
he believes it creates tons of joy too. 


As a designer. Leonardi is inspired by the 
competition. For him. the design world is a 
contest between the designers. Each trying to 
better the other by creating a superior design. 
He believes this is good because it will 
motivate designers to always deliver the best. 
Designers need to push the limits to wow the 
audience, and it is a major accomplishment for 
designers to create new styles that change 
design trends set new precedents - something 
Leonardi hopes to achieve. He also likens 
designers to entertainers. He thinks design 
should bring happiness to people, and that 
there is nothing more satisfying than seeing a 
smile on a clients face when viewing his work. 






SMflf VODKA. 


Joxjiews.com/Dn-air/war-storJes/index.titmJ 


FOX NEWS 


search featured topics shows 






W a ~-«*r 


P Mobile ap p 


www.BPggdtv .cQm/DrQarams/pinkS'aU-Qut 


www.5kvv.com 


01 

T his is Robby Leonard's design 
portfolio website. He utilises plenty 
of illustration as it is a love of his. 

He also uses some animation to 
give life to the pages. 


02 

Biography page with a dark 
theme to represent a night scene. 
It also applies car racing motifs to 
reinforce the petrol head nature of 
the Pmks AH Out experience. 


03 

The microsite uses mainly blue 
colour to mimic the iconic Skyy 
Vodka bottle It also projects a 
luxurious look and feel to 
represent the Skyy Vodka brand. 


04 

This show page uses mainly 
brown colour to represent a 
middle-eastern warzone. It also 
uses war elements to enhance 
the storytelling of the show. 


05 

The blue colour reinforces the Fox 
Mews colour palette. The futuristic 
look and feel is aimed to match the 
Xbox Kinect brand as an advanced 
digital device. 
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independent and job-hungry web designers 
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Andre Weier 

web www.N alindes iqn.com 



Current role Freelance communication designer,, founder & 
creator of Polarfox 

Education Diploma in communication design 
Expertise Flash. Photoshop, Illustrator, Dreamweaver, 
ActionScnlpC. HTML. CSS, SEO 

Clients Abandoned Subraumstudio. The Asura, Freikkrchliche 
Gemeinde 

Twitter @Nalindeslgn 


Andre Weier graduated in 2005 after 
studying communication design for tour 
years at Ruhrakademie in Schwerte (North 
Rhine-Westphalia, Germany). Over the years 
he specialised in innovative navigation 
concepts and entertaining experiences. 

One of Andre Weier's works, freikirchliche. 
com, became In 2008 a finalist at the 
prestigious FlashForward Award for Best 
Navlgatlon/Experience with competitors such 
as MSNBC and Adobe. 

Andre Weier's work was featured in a 
number of books like Web Design: Navigation, 
The Web Designer's Idea Book, numerous 
web design Index books and has won web 
awards like the DOPE Award. DesIgnTAXI 
award and American Design Award. 

In mid-2011 Weier founded Polar fox. a multi¬ 
platform desktop app that lets you beautify, 


save and multi-post images to social networks, 
blogs and clouds Including Facebook, Fllckr 
and Twltplc (www.PolarfoxApp.com) 

The beauty of web design for Andre is the 
flexibility and possibility it offers to reach and 
get in contact with millions of people. 

The reason Andre got into web design was 
a desire to design and build beautiful 
interfaces, a hallmark of all of his work. His 
inspiration comes from his everyday life: 
everything he sees helps shape his design. He 
also loves to surf, and again, this provides 
endless streams of inspiration that are 
incorporated into his designs. 

Keeping an eye on web trends is crucial for 
Andre and it is Plnterest. where he has his own 
presence ( pintere5t.com/FQlarfoxApp) and a 
site that has been getting a lot of his attention 
is w w w.i n d ieq oqo.com 



oi jtf wMiBPlarf axapjiiCQm 



the-desk.nalindeston.cpm 


' driDs.nalindesiqnxQm 


7.ED£S^ 


01 

Polar fox is a free desk top 
application that lets you 
beautify, save and multi-post 
images to a variety of social 
networks, blogs and clouds. 


02 

Webcam, light, microphone and 
mouse action painting 
application inspired by 
legendary American artist 
JacKson Pollock. 


03 

Audiotennis is a Pong-esque 
flash game which can be played 
by making noise into a 

microphone, or by scroll iog a 

mouse wheel. 


04 

Gnjngy style Flash £ XML driven 
website for the hardcore and 
death metal band The A sura., 
who hail from the Sauerland in 
the west of Germany. 


05 

Flash-based design portfolio 
displayed on a variety of cards 
that you can flip, move and throw 
with the click, hold and shake of 
your mouse. 
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Web talent showcase 



The Smart Marketing 
& Media Group LTD 

web www.smartuk.net 



Current role Web design arid marketing specialist 

Education N/A 

Expertise -u II service marketing g rou p, d igital & print 
Clients Henry Hunt. Big Green Technology, Colstoun 
House, Velvet Mule, Warners 
Twitter @TheSmartGroup U K 


The Smart Marketing & Media Group has been 
supplying Its web design service to advertising 
agencies. SMEs, global corporate, and blue 
chip companies for over ten years - in the UK 
and worldwide. With experience and a fresh 
approach to web design. Smart produces 
inspirational web-based products. They attract 
visitors and return on Investment 
It currently resides In a state-of-the-art facility 
that is the home of cutting-edge design and 
brilliant marketing concepts, all under one roof in 
the West Midlands. Whether a client of Smart is 
new to the Internet or rebuilding an existing 
website, they can be assured of intelligent 
solutions to grow their business. All of Smarts 
web design is one hundred per cent bespoke, 
and is customised to exact client requirements. 
Unlimited design revisions ensure that clients are 


completely satisfied with the process. Smart 
develops bespoke eCommerce solutions and 
content management systems, and has been 
Independently reviewed and rated as one of the 
top web design companies in the world, by the 
venerated Which Web Design Company for a 
number of years. 

As a full-service marketing group. Smart plans 
and executes targeted marketing campaigns that 
drive traffic to websites. It specialises in a wide 
range of proven marketing techniques, inducing 
SEO, RPC, email marketing and social media. 

Smart prides itself on supplying exceptional 
service and market-leading products. This has 
lead to a sharp Increase In reseller Interest Smart 
also offers other design agencies and resellers 
exemplary website design and development 
with real profit-making benefits. 



CH The Smart office 


01 

TV superstar psychic Sally Morgan's 
CMS-based website is designed and 
developed w«ha shop ladity and events 
calendar. It was built in association with her 
smash hit TV show on Sky bvmg. 


02 

Hamilton Bradshaws CMS website was 
developed by The Smart Marketing Group. 
The chairman of Hamilton Bradshaw is the 
welHknown member of the BBC's 
Den, James Caan. 


03 

TheEssensuals Hairdressing national 
website was built by Smart Essensuals 
are a sister company to Toni & Guy. and 
Smart created the fresh new lock for the 
UK hairdressing giant. 


04 

The Smart Marketing Group's 
state-of-the-art head office: in 
Shrewsbury. It is strategically 
positioned in the centre of the Country, 
dose to the M6 motorway. 
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NEXT ISSUE 


20 PHOTOSHOP 
TIPS AND TRICKS 

ESSENTIAL 
TIPS, TRICKS AND 
TECHNIQUES FOR 
WEB CREATIVES 




jfiwrubrd c&iltnl 
uunf HTML4 CSiS jmJ 
wMfi nir, pcnfrti ind prrtiwon 


RESPONSIVE 

PROTOTYPES: 

FOUNDATION 

Install I the responsive front-end 
framework and quickly build flexible and 
efficient layouts 


CREATE RICH 
INTERACTIVE 
CONTENT WITH 
ADOBEEDGE 

Use HTML5 C553JavaScript and 
Adobe Edge to build interactive 
content that runs on mobile devices 
and desktops 


NEWS 

PORTFOLIO 

INFORM ATI 0 

CONCEPT 

MEMBERS 

AWARDS 


PROFILE: 

BIRDMAN 

The insanely talented Tokyo design 
agency reveals w hat constitutes good 
and bad design 



FRIEND-FINDER 

WEBAPPPT2 

Grab share and update your position 
using HTML5 J s gedocation API 


Visit the WEB DESIGNER online shop at 

imagineshop.co.uk 

for back issues, books and merchandise 


ALL IN YOUR LATEST 



3 DESIGNER 


Issue 201 on sale 

Thursday 20 September 2012 
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trend map 


Lisbon 


Searching for creative advances in Portugal’s capital 


The stage is set for the 
sharing of knowledge 


9 Quodis 

www.quodisxom 

More than a decade old. Quod is happily 
works on the web out of its beautiful 
co-working space, Liberdade 229, smack in the 
middle of Lisbon. Quodls Is also a part of the 
growing web community In Lisbon, organising 
the monthly meet up Florida After Seven - an 
after-work event with a great view, where 
like-minded folk can grab a bite to eat and share a 
g lass of w I ne wh I le the city ra ces by. 


* jSBSL^ 



i 




4hQuodas 


i, Jevdopmenl. 


W' 


Welcome to Lisbon, an 
affordable city where sun, 
sand, gastronomy and 
architecture come together 
on the shores of the Atlantic, 
providing a healthy dose of 
inspiration to web creatives. 
With a small but emergent 
web community, the feeling 
that there is still plenty of 
room to grow serves as a 
constant motivation 


TV Tot only has the number of web agencies 
XN in Lisbon risen recently, the quality of 
their work has improved massively as well. 
Working out of sun-filled classical offices on 
narrow terraced streets, or one of the 
several recent co-working spaces, the stage 
for a vibrant web community Is set. 

Perhaps for these same reasons, a wide 
array of community-held events have been 
springing up lately. Lisbon currently holds 
some of the best LJX OJX Lx) and Design 
(Refresh LX) conferences in the International 
scene. Healthy Word Press and Drupal 
communities, and for the more technically 
minded, the first Lisbon JavaScript conference 
(LXJS) is held this year, integrated in the first 
Lisbon Digital Week. Also, for years now, the 
local Telco has organized Codebits, a massive 
yearly event that brings together over 800 
developers In a three-day 24-hour hack-a-thon. 

Mix In a strong entrepreneurial spirit 
backed by governmental programmes and 
inspiring events such as the SWITCH 
Conference, several TEDx and Ignite editions, 
and the stage is set for the spiralling effect that 
comes from the sharing of knowledge and 
quality work, 



















































































































9 SWAT 

www.weareswat.cQm 

With a group of specialist developers, each with their own 
specific ski I Iset SWAT is able to offer its clients a complete 
service. Their work showcases their prowess as pixel-jockies that 
can turn a client idea into reality, and push what is possible online 
to new heights. 

SWAT 







Massive 

www. itsm a ssive .com/en 

As an a ward-winning agency. 
Massive I eve re very digital tool 
currently available to develop its client 
briefs. At Massive the re is only one rule, 
and that is to break the rules. This enables 
it to push the envelope with the work It 
does for the brands in its extensive 
portfolio, which Includes some of the 
biggest brands in Europe. 



weareboq 

weareboQ.com/en 

Bold design and a strong typographic sensibility 
characterises the work of this studio that, since 
establishment in 2004, has gained a diverse portfolio of 
work. Whether designing for print or the digital space, clients can 
be confident that their relationship with we are boq will produce 
unique and Innovative design. 




V Wiz Interactive 

WWW.WIZ.pt 
Diverse Is the perfect word 
to describe the work that 
comes from Wiz Interactive. 
High-end, graphic-based, branded 
sites rub shoulders with bold 
illustration and motion graphics to 
create an eclectic range of work that 
Inspires others. The team at Wiz fully 
understand not only the design 
technology they use, but also how to 
powerfully apply their skills to each 
client brief. 



j±/ m & i 

i. j .si 






Lisbon predates 
other European cities 
such as London. Pans 
and even Rome by 
several hundred years 


A huge old printing factory that is now returned to the 
city. A creative island occupied by corporations and 
professionals that the industry serves, it also has 
stage for a diverse set of events related to fashion, 
publicity, design, architecture and music. 


Bruno Abrantes 
Web developer 

Fundagao Calouste Gulhenkian 


www.aulbenkian.Dt 


If you have a hunger for art and culture, you must visit 
Gulbenkian. Its sprawling corridors house regular 
exhibits from global artists, and its concert floor 
features an eclectic musical selection. The beautiful 
park that surrounds it is perfect for a weekend picnic. 



Be hi nd M N A A. there's a wood erf u I ga rden 
overlooking the Tagus; grab a book and bathe in the 
sun. surrounded by beautiful sculptures and trees. 
There's free Wi-R and a small self-service restaurant. 
The museum itself is free on Sundays before 2pm. 
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designer Subscriptions Voucher 


YES! I would like to subscribe to Web Designer 

Your details 

Titfe_First name_ 

Surna me_ 

Ad d ress._ 


Postcod e Co u ntry__ 

Telephone number,__ 

Mobile number__ 

Email address_ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

I UK Direct Debit payment 

F will receive my first three issues for just El, I will then pay only E25.15 every six issues thereafter. If, however, I da not 
laVe What 1 See, I car cancel at any time. 



YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 

_ UK £62.30 (Save 20%) \T Europe £70 [T World £60 


Cheque 

I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 

Credit/Debit Card 

Visa [ MasterCard [ Amex I Maestro 

Card number Expiry date 

11111111111111111 11111 

Security number I I I (last three digits on the strip at the back of the card) 

Issue number I” I (if Maestro) 


Signed_ 

Date_ 

Code: PCG200 

r Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 

FT Tick this box If you do not wish to rec&ve promotional material from other companies. 

Terms and conditions apply. We publish D issues a year. Your subscription will start from the next avaiable 
issue unless otherwise indicated. Qrect Debit-guarantee details available on request This offer expires 
without notice. 

I would like my subscription to start from Issue; I 1 I 

Return this order form to: 

Web Designer Subscriptions Department, 300 GuiHat Avenue, 

Kent Science Park, Sitting bourne, ME9 SGU, or email it to 

webdesigtter@servlce>ielpilnaco,ulc 



200" issue special 


SfiPtuI ftitTicttiac The king ol Q»5 kwAi 

Malt Mulleiiweg Erie Meyer 



“Flash is dead, 
so let’s build a 
better internet'* 

Patrick Van Kann, R/GA 


PLUS 

pro tutorials 
Soled Nblr 
Profile special 
Over 10 hours 
of video tutorials 



FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
get your first three 
issues for only £1 

!*• Pay only £4.19 for every future issue 
- a 30% saving on the store price 
» Free UK delivery to your door 

P* Never miss an issue 

* 

»* Money-back guarantee 


*Terrns & Conditions 

This offer entitles new U K direct debit su bscribers to receive thei r 
first three Issues for£1. After these issues,subscribers will then pay 
£25.15 eve ry six i ssu es. £ ubscri bers ca n canceI this su bsc ri ption 
at a ny time. New subscriptions wl llstart from the next availab le 
issue. Offer code FCG200 must be quoted to receive this special 
subscription price. Details of the direct debit guarantee areavaiiable 
on request Offer expires 30 November 2012. Imagine Publishing 
reserves the rig ht to lim it th is type of offer to one per household. 
Source code: PCG20O 
Web address: wwwjmaqine 5 ufa 5 .co.uk/wed 
Tel: 0644848 840 


Manage your subscription account online at www.imaqinesubs.CQ.uk 




















































ISSUES OF 

WEB DESIGNER 

FOR JUST 




Get your first 3 issues for 
just , then save 30% 
on the shop price 


THREE EASY WAYS TO SUBSCRIBE 


1. Online 

Order via credit or debit card, just visit 

www.imaginesubsxo.uk/wed 

and enter code PCG200 

2. Telephone 

Order by phone. Just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 and quote code PCG2Q0 


3. Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 

















Ill association with 



0 * * ts Our web-hosting guide is brought to you in association with 

Fasthosts, the UK's leading reseller web-hosting provider 


* Unlimited websites 

• Unlimited bandwidth 
» Unlimited web space 


■ Use your own brand throughout 
»24/7 expert UK-based support 

■ No-risk trial - 3 months free 


I I-Iostiiig listings 


Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed^ drop us a line with the details! 

\ webdesiq ner@imagine-publishinq.co.uk 


NAME AND URL 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



1&1 


1&1 Internet Ltd. 

www.landl.co.uk 


161 Starter (Linux) 

1&1 Standard (Linux) 
1&1 Standard (MS) 

1&1 Unlimited (LiriM) 
1&1 Unlfnlted ffllS) 
Iflrl Business (Linuxi 
l&l Business CMS) 


0844 3351211 E 2&88 5 GB Unlimited 1,000 / H S S / S S t 

G 844 33512 H ££988 50 GB Unlimited 3.000 S S S / S S / X 

0844 33512 H £71 .BB 50 GB Unlimited 3,000 / t S S S S S t 

0844 3351211 LB 3.88 Unlimited Unlimited 5,000 S S S S S S S t 

0844 33512 Tl E 107 B 8 UnSmited Unlimited 5,000 St S / S S S t 
0844 3351211 £ 119.88 Unlimited Unlimited Unlimited S S S S S S S t 

08443351211 £ 155.88 UnSmited Unlimited Unlimited S t S S S S S t 


111XA/ U.U * F 11MphHwl ram Urtteited WfebHosting Pack N/A 
I I W© PMOSlJj httDr//1 Tl weblio st.com starter Web Hosting Pack N/A 

Budget Web Hosting N/A 

Word Press Web Hasting Pack N/A 
DrupalWfeb Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
asCommerDS Web Hosing Pack N/A 
ZenCart Web Hosting Pack N/A 
PrestafihopWdbHosttigfeck N/A 


£60 Unlimited UnSmited UnSnifled 

£30 5 GB 2 GB 10 O 


£12 

£24 

£24 

£24 

£24 

£24 

£24 


1 GB 

5 GB 

5 GB 

5 GB 

5 GB 

5 GB 

5 GB 


1 GB 

2 GB 

2 GB 

2 GB 

2 GB 

2 GB 

2 GB 


5 

100 

100 

100 

100 

100 

100 


123-reg 

i23netj fwtfttUi-rpaflnnki 
123-reg fwwift.m-raftJO.uli> 
122-reg f www 1? 3-rpg eg . u k J 



Blackfoot Hasting Ltd 


BlackroQt Hosting Ltd towMarWnr i lrn iik > 
Blndkfnnl Hosting Lid (wwHfcblacIi f aQlg & M k . ) 
SHscKfoot Hosting Ltd twww.bt Mfcf oP t JC k uli ) 

Biaamignt tow tHarttninhr rnm? 

BiaJtnight tow.fflacKnlaht.com? 

Bttwu (btadtir.aMUia.LiKl 

SrnvnU rhllpffhriwnUrn nk> 

Bf nvn14 { hUPifjfbrTVoU.tP.uk> 

0ravo14 f bttPij'j'bravnn, 1 n,uK> 


□aiiv Internet tow,.dfllLy.C&lJKi 
□ally Internet [ wwtf.dallv.ca.uk3 
Daily Internet towflalttmilKl 
Qraily inlprnrt tow.do il y . qa u lU. 



Starter 

PftJS 

Pro 

Bui Pro 
Plus, (MS) 

Pro (WSJ 
8usPro(WS) 

Light Use* 
Everyday 
Bushess/Pro 
JAVA Tomcat 
ASP.NeI 

Branxe Package 
Sliver Package 
Cold Package 
11tanium Package 
Reseller Package 
Home 


Professional 
Minimus 
Medlus 
Maximus 
Starter Linux 
SI arl kt Wratows 
Bu^vkso. Linux 

flu aiKi Windows 

Ultimate Linux 

Ultimate Endows 

Entry 

Home 

Business 

flu mipss Plus 

Starter 

Home 

Business 


OEMS 059 0918 
OEMS 0590018 
0345 3590018 
0345 0590018 
0345 P59 0013 
0845 0590018 
0845 0550018 
08703212020 
0370 321 2020 
08703212020 
03703212020 
0370 221 2020 
03451fi6330ft 
0845 «S 8306 
08451668306 
OEMS 166 3506 
03451663536 
M/A 
M/A 
M/A 
N/A 

35359 918 3072 

55359 9133072 

55359 913 M72 

N/A 

N/A 

M/A 

M/A 

N/A 

N/A 

03/51662100 
0345166 2100 
0345166 2100 
03451362100 
0344272 9348 
0844972 9848 
03/4572 9318 


E29.38 100 5GB 20 

E59.B3 5GB 50GB 500 

£107J8B 1000 100GB 750 

£179,86 20GB Unlimited 1,000 

£59.03 2GB 35GB IDO 

£107.88 5GB SOGB 500 

£17988 10GB 150G& 1.000 

145 20MB 1GB 9 

£100 200M3 10GB 15 

E27S 500MB 20GB 50 

£500 IOOMB 3GB 15 

£275 UJOMS 2GB 15 

£10 10MB SOOMfl 2 

£64.99 20MB 2GB 10 

£79,99 SO MS 2GB 50 

£119.99 5O0MB 5GB 500 

£299.99 1GB 10GB 1,000 

£10 5Q0M8 5GB 5 

ISO 1GB 20GB 1QO 

£100 2GB 10GB 200 

£1M 3GB 60GB 300 

£45 10GB 200GB Unlimited 

E73 2DGB 10O&B Unlimited 

E/5 30GB 600GB Unlimited 

£130 2.000MB 2.000MB 10 

£2£J 2000MB 2000MB ID 

£45 4.000M3 4.000MS 4.000 

£45 4j000M3 4.000MA 4,000 

£60 Unlmiited Unlimited Unlimited 

£60 Unlmiited Unlmilted Unlimited 

EI9.2B 500MB 5GB 75 

£50.90 3GB 30GB 30 

£53.94 12GB I50G3 600 

£77.91 24GB 250GB Unlfcnilcd 

£30 3GB 2DGB 1,000 

£10 10GB 5K3B 10.000 

£60 Unlttnlted Unlimited Unlimited 
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In associ ation with 







Get your listing highlighted! Contact Richard 
O ridiardmst(5)imagine-pubIisIring.co.uk 
0 + 44 ( 0)1202586436 hosting listings 


Featured host of the month: Blackfoot Hosting www.blackfoot 


.co.uk 



Offering more reasons for choosing one of the listed providers 


NAME AND URL 


□nxignvrasp ft 
□igilal Gibhon Lid Ch[[o ; .'AfcDiLMpihbon.Dnml 
Digital Gibbon Ltd {hMp-.ffdH3ltaintbbon.c-om) 
Digital Gibbon Ltd ftutpiflcfcpltalplbbnn.mcn) 
Digital Gibbon lm flittrffflfniriUnlhhnn rnrrT' 



Oonhost [www.donboat.cayk) 
Oonhost fwww.itonhoat.rault') 
Donhoat fwwwhnnhmt rnulfl 
oonhost (www.donnosi.tauK? 
Dcnhoat fwwrfrtnfirwttrmilf) 

OnnhnsL Iwww.donhosI.rauk) 
tWMHnfl (www.ehosLing.cam) 
eHostlng (wwYr.Bhostlno.com) 
eHosting twiMK.iabn5UDfl.mniL) 
eHostlng tw«rcr.Bhcfitlnn£gni) 



Black; loot isan experienced UK-based web-hosting provider 
with a proven pedigree In offering hosting and domain name 
registration services since 1999. Specialising in Linux-based 
servers, housed across three London data centres, Blackfoot promises 
24/7 monitoring and a dedicated support team to guarantee uptime 


and first-dass delivery. Hosting options are available in five flavours 
ranging from the entry-level Home solution for £40 per year, up to 
the powerful eCommerce, Professional and Partner packages priced 
between £100-200. All come with access to the feature-packed cPanel 
control panel for intuitive maintenance. 


Glacom 1'bwrw,f]hrnni.L-rjni 



Window?, ummfled 
Windows Home 
dwsipHnxL 
PHrscwi.il 
Personal Plus 
Susineu 

Business Professional 

Bronze Linux 

Gold Linux 

Bronze Windows 

Gold Windows 

Reseller Unix 

Reseller Windows 

Enterprise 

Commerce 

Designer 

□nvelnper 

Elarler 

Personal 

expert 

Virtual 

Bronze 

Silver 

Gold 

PtaUnum 

Email Only 

Essential 

Superior 

Premium 

Starter 

Home 


eCofrimerce 
Business Pro 


0344372 9B48 
0344372 9B4S 
272 MM.dil. 
01965 509 990 
01865 SB9990 
01865 569 590 
01365 569 990 
0191 261 2252 
0191 261 2252 
0191 261 2252 
0191 261 2252 
08452265566 
08452265566 
0345 2265566 
0345 2265566 
0345 2265566 
0945 226 5566 
0944 9994100 
08445994100 
08449994100' 
08449994100 
0121 314 4365 
01213144365 
01213144365 
01212144965 
02390 249 R23 
02380249823 
02380 249 823 
02380 249 823 


HfA 

0800 S42 7500 


£43 

£108 

£132 

OO 

£100 

OO 

£100 

£39999 

£469.99 

£39.99 

£179.99 

£119.-99 

£259.99 

£23.99 

£50.88 

£95,83 

£227.80 

£30 

£42 

£72 

£114 

£40 

£75 

EHO 

£250 

EZ9.99 

£54.99 

£79.99 

£15999 

D99 


Unlmiited 

5GB 

Unlimited 

100MB 

500MB 

IQOMB 

500M3 

Unlmiited 

Unlmiited 

1GB 


1GB 
Z5GB 
5 GB 
50GB 
200MB 
400MB 
800MB 
1,200MB 
1GB 
2GB 
5GB 
10GB 
500MB 
2.5GB 
6.5GB 
30GB 
100MB 


IGl) 

5GB 

Unlimited 

Unlimited 

2GB 

5GB 

2GB 

5GB 

25GB 

Unlimited 

Unlimited 

Unlimited 

2GB 

5GB 

10GB 

40GB 

2GB 

5GB 

10GB 

25GB 

1GB 

30GB 

Unlimited 

Unlinitnri 

2GB 


Unlimited 

UnUnited 

250 

500 

250 

500 

10 

50 

250 

Unlimited 

ID 

20 

lOO 

200 



Personal Standard 

0844 583 0777 

£5180 

5GB 

Unlimited 

500 

y 

X 

y 

y 

y 

y 

y 

a 


Business Standard 

0844 583 0777 

£95.08 

75GB 

Unlimited 

1,000 

y 

Option 

y 

y 

y 

y 

y 

A 


Business Premium 

0644583 0777 

£173.88 

50GB 

Unlimited 

Unlimited 

y 

/ 

y 

y 

y 

y 

y 

A 

Fasthosts 

WDStarter Reseller 

0044583 0777 

£149-99 

20GB 

Unlimited 

Unlimited 

y 

Option 

Option 

y 

y 

y 

y 

A 

www r f35thQ5t5,cg r yK 

Advanced Reseller 

06445830777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

y 

Option 

Option 

y 

y 

y 

y 

A 


HnnrL InLernel twww.hiar linlHrnet.cp.uk) 



Hostwey feiUtexJinstwavrritib) 
Hostwaiy (www.hpstwavc&uk) 
Hostwaiy {www.hestwav.oo.ykJ 


Hnstwny (www.hn5lwa.VJQ.uk) 



iCUk www.icukhostlncLcojJk 

KUKiimw.iBuiin«ting.muK 


Starter Professional 

0345 6447750 

£29.00 

2.5GB 

10GB 

1,000 




y 


y 

y 

y 

Home Professional 

0345 6447750 

£3999 

10GB 

50GB 

10,000 

y 

y 


y 


y 

y 

y 

Business Prolessinnnl 

0945 E44 7750 

£129.99 

UnlknitHd 

Unlimited 

UnEmlted 

J 

y 


y 


y 

y 

y 

Reseller Professional 

084S 6447750 

£269,99 

Unlmiited 

Unlimited 

LUWmlfed 

/ 

y 


y 


/ 

y 

y 

Silver 

08081801080 

£79.50 

150 MG 

3GB 

5 


Option 

y 

y 


/ 

y 


Gold 

08081801080 

£136.50 

300MB 

5GB 

ID 

y 

Option 

y 

y 

y 

/ 

y 


Gold Plus 

0303130 1830 

EIB9.50 

45DMB 

10GB 

30 

y 

Option 

y 

y 

y 

y 

y 


Platinum 

0303130 1830 

£359.50 

600MB 

2DGE 

50 

y 

Option 

y 

y 

y 

y 

y 


Platinum Plus 

0303130 1B30 

£599.50 

1.2GB 

40GB 

10 

y 

Option 

y 

y 

y 

y 

y 


Email Plus 

0909190 1090 

£4935 

50MB 

NM 

5 

WA 

N)A 

N.'A 

y 


/ 

y 


PrOlrsxInnnl 

0945 DM9175 

£20 

250MB 

1GB 

SO 

y 

y 

nplinn 

y 

y 

y 

y 


Advanced 

0845 DM 9175 

£50 

2GB 

2KB 

ISO 

/ 

y 

•option 

y 

y 

y 

y 


£nterpnse 

0845 0069175 

£00 

2GB 

MOMS 

Unlimited 

/ 

y 

option 

y 

y 

y 

y 


Professional Plus 

0345 DOS 9175 

£90 

500MB 

5GB 

IDO 

y 

y 

option 

/ 

y 

y 

y 


Premium Plus 

0345 OD9 9175 

£150 

1GB 

12.5GB 

500 

y 

y 

option 

y 

y 

y 

y 


Enterprise Plus 

0345 009 9175 

UOQ 

2GB 

20GB 

Unlimited 

y 

y 

option 

y 

y 

y 

y 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK's leading reseller web-hosting provider 
•Unlimited websites * Use your own brand throughout 

* Unlimited bandwidth * 24/7 expert UK-based support 

• Unlimited web space * No risk trial - 3 months free 

I Hosting listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of sen/ice providers 



Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

O + 44(0)1202 586436 

Continued... 


NAME AMD URL 


KUKw 
KUKu 

eu* wimliufflrallnara'iR 

JAB lweb Hosting toww lahwPhhrwNnn rrm'i 
JAB Web Hosting WwnJabwebhiratlnp.aM-i) 
JAB Web Hosting ( wtfajabaehh«Hnfl.iMsn) 

jab Hnsiing ftyff ff.jabwBlatimllnn rmnl 

lcn CmBHJciktQin) 

LCN ( www.lcn.cami 

ITN ftnawlrnfnrm 
LCN ftMwwJgnjoma 
LCN ( wwwJgn.jom.1 

LCN i' wujuj L-n rnm 1 ! 

iD Hnsl i <ht Ip:JVIlihfl5C5.Cn.uk> 

LD Hn (ht1pJ/lrihflgt5.m,ukl 
LD Hosts t nilDj'j 1 1d tlMtjL lOOI kJ 



Reseller Windows 

Reseller Linux 

Reseller Enterprise 

Wall - H105 

Home -H25 

Rfolesalonal- P55 

Readier - R25 

Reseller - R105 

Blog 

Starter 

Starter 

Dynamic 

Premium 

Unfimlled 

LD Budget (Linux) 

LO Home (Linux) 

ID Pro (Limix) 

LD Unlimited (Linux) 
Windows Home 


08450033175 
06450033175 
0845 0099175 
0600 0430153 
OSOOQ430153 
0800 0430152 
OftOO 0430152 
0*00 0430153 
014-3&J42 4 90 
0142B >12 190 
D142B >12 190 
01428 342 490 
D143B 342 490 
01436 342 490 
07691 235B5B 
07631235656 
07631 £35656 
07691 235B56 
07691 235S5B 



1QGB 

50GB 

Unlimited 

2GB 


50 

Unllrnled 

5DO 

5.000 

20.000 

Urtlntfled 

l r 000 


Ten.plkmrrp^meHi.lernple nelt 

Shrmtd- Server Pro 

+1310 B41 5500 

£64 

2GB 

tra 

1.000 

J 

y 

y 

/ 

y 

y 

y 

y 


Shansd-Serwer Advanced 

*1310 841 5500 

£109 

5GB 

1.5TB 

5,000 

J 

J 

y 

y 

y 

y 

j 

y 

NameHOG 

AlTorcttOio ifrtsrmrt So union* 

NameHOG www.namehoa.net 

EMAIL ONLY 

STARTER 

HOMEPRO 

BUSINESS 

01604212 904 

01604212 904 

01604212 904 

01604212 904 

£11.99 

£36.99 

£59.99 

£10999 

2.5GB 

10GB 

25GB 

Unlimited 

15GB 

150GB 

Unlimited 

Unlimited 

10 

Unlimited 

Unlimited 

Unlimited 

X 

X 

y 

y 

X 

X 

y 

y 

X 

y 

y 

y 

/ 

/ 

V' 

y 

/ 

J 

J 

/ 

/ 

y 

y 

/ 

y 

y 

y 

/ 

y 

y 

y 

Namescp (mviwxkariies.[icijufcl 

Startup-Pfcn 

0845363 3632 

ES3.9B 

500MB 

5GB 

10 

y 

y 

y 

y 

y 

y 

y 

y 

Namexcn (www-nam&ecLiifcl 

Busimas 

0*45362 3622 

£149.99 

2,000MB 

20GB 

100 



y 

y 

y 

y 

y 

y 


Business Pies 

QS4&J633G32 

£83.33 

3.000MB 

30GB 

200 

y 

/ 

/ 

/ 

y 

/ 

y 

y 


Designer 

08453633632 

E233 BB 

1GB 

20GB 

200 

y 

/ 

y 

/ 

y 

y 

y 

y 

Namesco (wwwjiamesjauuk) 

Designer Plus 

0845363 3632 

£4 79.85 

Unlimited 

30GB 

Unlimited 

y 

/ 

y 

y 

y 

y 

y 

y 

NETCSTSRfl 

DEVELOPER 

0600 0612SOI 

£32.09 

1GB 

Unlimited 

500 

/ 

/ 

y 

/ 

*4 

y 

/ 

/ 

ONE 

0800 0612SOI 

£109.99 

5GB 

Unlimited 

1000 

y 

y 

y 

y 

J 

y 

y 

y 

RESELLER 

0800 0612801 

£274.89 

Unlimited 

Unlimited 

1000 

y 

y 

y 

/ 

J 

y 

y 

y 

Neleetsera www.netceteraxo.uk 

VM500 Server 

0800 0612801 

£300 

20GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

J 

y 

y 

y 


2200DC Server 

0800 0612&01 

£720 

160GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

J 

y 

/ 

y 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

X 

/ 

J 

y 

y 

y 


26Q0QC Server 

0800 0612SOI 

E1.SOO 

2x500GB 

Unlimited 

Unlimited 

y 

/ 

*7 

/ 

y 

y 

y 

y 

Hetplan (WrtWrtglEfan.CP.UlO 

Shared 100 

02D7 KHMJ 424 

£60 

WOMB 

1GB 

5 

y 

y 


/ 

j 

y 

y 

y 



PurplePaw fmiwiiiRijriilFnfflriruiJ^ 
PurplePaw forrm.purolepflW.ia.uHj 
PrirplePew fo wdi pi itQle rw* rrmli.l 
py j piepjw (ivrtrijurpkiMrt.tja.uk) 
Recklex UK fwww.redde^ult.cnmi 
RefWex L. < f-.v.vw r : , .'l. |. ■>.. K .carri) 
Redttex I IK IWiv nprldpaiifc rnrnl 
ShymarNet (^^EHymarteLro.uU 
ShvmarNet fo™w.5 hymgr1re Ug,'l»l) 


VS'IOO 

V5200 

V530D 

Dedicated Servers 

Emae 

Play 

Plus 

Power 

R3 Reseller 

RhMiw DeiignSlrwLw 
RkHHkx Desi^i Eusineia 
Rwttax Design Premium 
Standard 1 
Standard 2 


0207 KHJO 424 

0207 WOO 424 

02071000 424 

02071000 424 

UiA 

M/A 

M/A 

M/A 

N/A 

0*43 269 4625 
0*43 269 4625 
0643 269 4625 
OSOO 321 7780 
0800 3217780 


£600 

£ 1,000 

£2,000 

£ 2 , 000 + 

ES 


£16 

£59.86 

£107.6B 

£43 

£63 


5GB 

10GB 

15GB 

73GB+ 

WOMB 

WOMB 

750MB 

2GB 

10GB 

1GB 

10GB 

100GB 

10MB 

20MB 


5GB 

10GB 

50GB 

1,50008 

1GB 

1GB 

5GB 

10GB 

50GB 

Unlimited 

Unlimiled 

Unlimited 

2GB 

2GB 


/ / 

J / 


100 

Unlimited 


100 

Unlimited 
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In associ ation with 



Get your listing highlighted! Contact Richard 
O ricIiardmst(5)imagine-pubIisIring.co.uk 
O + 44 ( 0)1202586436 hosting listings 


... 

I 


Can you 
recommend 
your host? 

Tweet us today with your 
hosting comments and advice 

@WebDesignerMag 


NAME AND URL 


5k ymartiet tvirtW li rf ni.fi tkrf milk"' 

SIR AT0 Hosting ( wwi-tr^g hosting 
STRATO Hosting {*^^9 lit) 

S7RAT0 H curing (ywj »> ^lr.it,n^U.nqcn uk } 
57RATQ Hosting ww.v.s.lrato-fe.i,liimcD.uk l 



swish Hosting tww.wja.mnsrino rmiy 



Twenty HtAi (rtwivlw airly tiflaLcau It? 


VARiHOST 

VARJHQST 


Weis Fusion twww.rtatrfuslon.ca.ulO 
WetiFuslon twww.rtetrfu5lon.cauk) 

Wet. Wl* CwaajKetHtkmiili) 

Web ■VIjt fwww.we hwJr.cn.uk) 

Wet- WU ijmw.rtyhwii.Da.ukl 





Premium! 

Premium 2 
STRATO flasIcWeb 
STRATO PowfifWeb 
STRATO ArivnncrdWnh 
5TRAT0 Enterprise Web 
1 rial 13 mandhl 
Starter 
Personal 
Plus 

MullulU? 

Email 


0300221 7733 
0300 321 7733 
0080080070070 
0000080070070 
00900SO07Q07O 
00300S0O7007Q 
034-1 9411000 
0344 9411000 
08449411000 
09449411000 
09449411000 
08445676971 


£41.88 

E71.9S 

£.137.83 


Swish Hosting (wwwjwlahhoatlraetyuk) 

Windows Hasling 

0344567 6-971 

£66 


Unlimited 

Unlimited 

■/ 

y 

y 

y 

y 

y 

y 

y 


Linux Hast Ins 

0344 5 67 6971 

£66 


Unlimited 

Unlimited 

■f 

y 

y 

y 

y 

y 

y 

y 

Swish Hosting (wwwswlshhostlnci.cauk) 

aCommerce 

08445 87 69 71 

£90 


Unlimited 

Unlimited 

/ 

y 

/ 

y 

y 

y 

y 

y 


SiteBuilder 

08445676971 

£12 


Unlimited 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

y 

Switch Media fwww.swiLchmwfcn cntnl 

Sivi Ich Si rmclnrcl 

0151236 9111 

£159 

1GB 

50GB 

500 

J 




y 

/ 



Switch Media hvww.swit-ehnwtj. 

Swiich Business 

0151236 9111 

£249 

10GB 

150GB 

1500 

J 




y 

y 

y 


Switch Media Cwww.switrhirtfeJia.cflfn) 

Business Pro 

0151236 9111 

£348.96 

20GB 

300GB 

5000 

y 




y 

y 

y 


ukhiyiielhMHimimiii 

Parking 

0370 765 6364 

E52.B3 

Z5MB 

500MB 

15 

y 

y 

y 

y 

y 

y 

y 



Forwarding 

0870 7656364 

Fran £i5 

NfA 

500M& 

MM 



y 

y 

y 

y 

y 



H curing 

0870 765 6J64 

From £750 

NM 

NM 

NM 




y 

y 

y 

y 


Tidy Web Hnstlnq (www.LldVwiebhcHtina.ooi.uk) 

Entry 

0844 9A4 9100- 

£25 

100MB 

1GB 

Unlinked 

y 

y 

y 

y 

y 

y 

y 


Tidy Web Hasting (www.tldvmebl'iMtinQ.CAUk) 

Home 

03443849100 

£50 

500MB 

5GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


lldy web Hosting (www.tldyrtetrfiMtlng.oauK) 

HomePro 

0344 384 9100 

£100 

1GB 

10GB 

Unlinked 

/ 

y 

y 

/ 

y 

y 

y 


lldy Web Hasting (www.tldvrtetrfiMtlna.oauk) 

Business 

0344 384 9100 

£150 

2GB 

2GGB 

Unlinked 

/ 

y 

y 

y 

y 

y 

y 


Tidy Web Hosting (www.tldviivebhMtina.co.uk) 

Busmessfro 

0844 8849w» 

£250 

5GB 

50GB 

Unlwiited 

/ 

y 

y 

y 

y 

y 

y 


TwentyHoit fwwwtwPHlvhnsLrmilri 

tesIrfS 

0845 6410776 

£24 

100MB 

1.S&0MB 

25 

/ 

y 

y 

y 

y 

y 

y 

/ 


SlnndardSS 

0945 641 0776 

£45 

20DM9 

3.QDOMB 

50 

/ 

y 

y 

y 

y 

y 

y 

y 


Busiftess55 
Advanced5S 
WordPress Basic 
WordPress Plus 
WordPress Extra 
Fusinn Prnlessinnnl 
Fusion Business 
FUslon Developer 
Fusion Reseller 
Windows Starter 
Windows Professional 
Windows SLarter RmkHiy 


0345 641 0776 
0345 641 0776 
02031447057 
02081447057 
02081447057 
09451301302 
03451301602 
03451301602 
03451301602 
08443561450 
0844 3561450 
0944 3581450 


£70 

£110 

£4788 

£71,68 

£119.60 

£107.40 

£179.40 

£22740 

£329.99 

£69.95 

£149.95 

£199.95 


500MB 

UOOOMB 

2GB 

4&B 

unlimited 

5GB 

10GB 

20GB 


7,500MB 
15,000MB 
10GB 
100GB 
Unlimited 
50GB 
150GB 
3000 3 


Unlimited Unlimited 


1GB 

4GB 

5GB 


25GB 

100GB 

25GB 


IOO 

200 

IO 

KK) 

Uniamted 

1.000 

1.5QQ 

5.000 

Unlimited 

too 

5M 

500 


Zen Internet www.zen.cayk 


Bronzie (Linux) 

0345 050 9000 

£4708 

2GB 

20GB 



/ 

/ 


/ 

J 

/ 

X 

Sliver (Linux) 

0045 050 9000 

£95.88 

5GB 

50GB 

25 


S 

/ 

s 

/ 

/ 


X 

Gold (Linux) 

0845 058 9000 

£143.80 

10GB 

100GB 

50 


/ 

/ 

/ 

/ 

/ 


X 

Platinum (Linux) 

0845 058 9000 

E239JJ0 

50GB 

250GB 

100 

•f 

s 

/ 

J 


/ 


X 

Reseller (Linux) 

0845 058 9000 

£479tfifl 

150GB 

500GB 

250 

-f 

/ 

/ 

/ 

/ 

/ 

/ 

X 

Designer (Windows) 

0045 050 9000 

£59.00. 

2GB 

20GB 


J 

X 

X 

/ 

/ 

/ 


X 

Developer (Windows) 

0045 050 9000 

£170100 

10GB 

100GB 


/ 

X 

X 

✓ 


J 


X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting yuur ideal packages largely 
determined by the kinds of resources and quantity 
of features you require fncrti your hosting solution. 
Key criteria like web space 3*id monthly bandwidth 
important for those Services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions far enterprise applications 
aetypleay miicfi mure expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements.. 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart bo 
compare costs, but be sure to visit the vendor 
websites to teep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reiable, trusted and 
experienced vendor can offer you much better 
value fcr money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up. monitor and 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting track online, then 
a commitment to future customer support is key. 
Many vendors orfer a service-level agreement 
which outline* what you can expect here, however 
moat wil be more explicit about whether phone 
support is included or email contact is preferred. 
Think abdut what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 


maintain their web space with minimal fuss. Most 
commercial vendors crfer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 
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OFF® 

USA 




Subscribe now and get 

f 7 ISSUES FREE* 


The only magazine you need to design and develop stunning websites 



TERMS & CONDITIONS 

*This is a l JS subscription offer; please dont forget to quote USA5 
when ordering. You will actually be charged £60 sterling for an annual 
subscription. This is equivalent to $94 at the time of writing. although 1 
the exchange rate may vary. Seven free issues refers to the newsstand 
price of $14.99 for 13 issues totalling $194.87 compared with $94 for a 
subscription. Your subscription will start from the next available issue. 
Latest offer is based on newsstand; price of $14.99 per issue com pared 
with $723through this offer 
This offer expi res 31 Octobe r 2012* 


Subscribe now 

«' Online 

Order by visiting: 

www.imaginesubs.co.uk/wed 

and enter USA5 to get this exclusive offer! 

Telephone 

Order by phone, just call: 

592878 

and quote USAS 






m eb designer 


Classified Advertising 


01202 586419 




today, tomorrow and the future For help and advice call free on 0800 6520 444 


WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS • RESELLER HOSTING 


fastHosts 


fasthosts.co.uk 

or call 0800 6520 444 0 f IS 



Making business work better online 









in b \ designer 


Classified Advertising 


PostcodeAnywhere 

The easiest way to add features to your website* 

UK & International addressing | Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out more; 

Call; 0800 047 0495 

ww w- po stood earay where, co m 



To Advertise In 



Contact Nick On 
01202 586419 

nick.marrow@imagine-publishing.co.uk 


trade secret 

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 



Buy online from £15 + vax 
Eliminate spell i ng m istakes 
Reduced abandoned carts 


30% reduct io n of keyst rokes entering add resses 
Create a professional image for your clients 
Simple integration with SDK & working exa mples 


For more details visit postcode-softwa re .net or call 084583 82 666 




WEB HOSTING 

fatmvtsiami 


TIB^webhosting. 

designers prefer it 


1. Personal Support 

2. Fully Managed Plans 

3. Superior Servers 

4. Professional Features 

5. Unlimited Addons 


FROM 


J P Vear 

equivalent to 



P Month 


Tidy Web Hosting is a trading name of Foldings Unmlted 

Registered in England & Wales (5935455). All prices subject to VAT. Call; 0344 884 9100 














Classified Advertising 


01202 586419 


Read anything 
good lately? 


Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 



imagineshop.co.uk i 


MAGAZINES BOOKS OVDS DOWNLOADS GIFTS 




GO» 

COMPILA 


« clikpic » 

Websites made easy 


0 


Clikpic is an easy-touse service 
for people who want a website 
without the cost and hassle of 
setting one up. 

With minimal technical expertise 
required, you can use our online 
admin system and a wide 
choice of template designs to 
create and edit your own web 
site quickly, easily and very 
cost-effectively. 

* Update or change your site whenever 
you want and as often as you like. 

* Have as many pages as you like. 

* Dozens of style features and options 
to customise your site and give it 
your own -fool and look. 

* Take order$ online. 

* Opt to have your own domain name. 

Many additional features recently 
added with many more to oome 



UK web solutions diret 


Established 2001 



Premium Web Hosting 

Our hosting plans come tuith the following features as standard: 

* cPanef control panel 

# FREE Web applications 

* SPAM /Virus protection for email 

• Daily backups - multiple restore points 

Utilising CloudLinux for rock solid stability and high performance, 
your mebsite is in safe hands with us. 

from £3*99 per month 


a:\ 


. * 


Web Hosting Reseller plans VPS Managed Servers 

littp://u kwebsolutionsdirect.co.uk 


Visit 























gr&at4gjtalinag£ - The official download website of imagine PubUi 


Magazines 


| J /iPad /iPhone /Android phone / Android tablet /Apple Mac / Windows PC 


3&0 Magazine 


30 Artist 


eBooks Apps 























No Disc. No Problem 

Many of the files you’re looking for can be 
found on the magazine’s website 

Imagine digital editions to get the most out of yoU r digital 

0 0 editions, be sure to enjoy all of our 

are a new and exciting fantastic features, including: 

way to experience our ‘ Zoomable text and P ictures 
world-leading magazines ! 

and bookazines. • Take your collection with you 



To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDigita I Mags.com 
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Vimeo 


Logo 

The Vimeo logo in 2007 
is the same as is in place 
today. Although it is no 
more than a selected 
font, it demonstrates the 
power behind a logo as 
part of a brand. 


vimeo 

Everyone oan upload 230nnb of video every week. Free. 



Vmrao is ft free and easy service for sharing your videos -mr. fnenas rind family or 
people you meet here Join Vrmee now end share your first video today. 



Header 

The header is simple and 
straight to the point. The 
colour Ls calming and 
engaging. A big logo 
ensures that visitors 
know where they are and 
a couple of salient 
messages get the core 
principles across. 



Three columns 

Another new look for 2007 saw a 
switch to three columns, This 
aflowed more Information to be 
presented on screen, and a 
more personal experience. 



Vimeo 


www.vimeo.com 


The video sharing site has stuck to its core principles of providing a 
venue for filmmakers of all levels, to become the hit it is today 


Founded back in 2004, Vimeo is a videosharirg 
website that gets its name from a play on the 
phrase J video me'. Users can upload, share and 
view videos, with a focus on user-made content. 

At the beginning of its lifecycle, Vimeo was a 
very basic site that was little more than a point to 
upload videos. It very quickly developed into a 


more coherent and cohesive experience, allowing 
users to share videos and interact with other 
users. The design was simple two-column stuff 
with a colour palette that made it inviting, It has 
slowly evolved since the early days, and now has a 
contemporary design, over 8 million registered 
users and 65 million visits a month. 


i I The design style was simple two 
column stuff with a colour palette that 
made it friendly and inviting ill 
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myvpsksufferingagain, 

WHAT AM I GOING TO DO? 


A123-REGVPS 


^ from just £14.99 4 

PER MONTH? 

THAT'S JUST THE TICKET 

s HOORAH! 


WITH A VPS FROM 123-REG YOU CAN SCALE UP AND DOWN AS N^DED, 

SO WHEN YOUR SITES NEED EXTRA OOMPH IT S JUST A FEW CLICKS AWAY. SPLENDID. 

• NOW WITH PARALLELS PLESK11 CONTROL PANEL 

• SPECIAL OFFER! FREE 100 DOMAIN PLESK LICENCE 

• UK-BASED DATA CENTRE AND SUPPORT 


1-12 CORE PROCESSORS vCPU, 
1GB-12GB MEMORY RAM 
50GB-300GB STORAGE iHDDi 




FIND OUT MORE ABOUT OUR VPS AT WWW.123-REG.CO.UKI VPS 

PRICE EXCLUDES VAT. TERMS & CONDITIONS APPLY. 


1 2 3 -reg 




co.uk 





RESELL 

Cloud Backup 
with unlimited storage 
to all of your customers 


For just £39.95 a month for UNLIMITED customers 

30 day money back | White label everything | Instant online setup 


H\sedri\se 

www.livedrive.com/resellers 



Questions? Call 020 3137 6446 


t Offer valid for 3 months from publication date. Discount will be applied to all costs at checkout {set up fee, branding fees, annual fee and/or first month fee). 




